@extends('app-new')

@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.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/extensions/ext-component-toastr.css">
    <link rel="stylesheet" type="text/css" href="/dashboard-assets/css/apexcharts.css">
    <link rel="stylesheet" type="text/css" href="/dashboard-assets/css/chart-apex.css">
    <link rel="stylesheet" href="/assets/css/daterangepicker.css">
@endpush

@section('content')
    <div class="content-header row">
        <div class="content-header-left col-md-6 col-4 mb-2">
            <div class="row breadcrumbs-top">
                <div class="col-12">
                    <h2 class="content-header-title float-start mb-0">Dashboard Analytics</h2>
                    <div class="breadcrumb-wrapper">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ $orgUrl . '/home' }}">Home</a>
                            </li>
                            <li class="breadcrumb-item active">Dashboard
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-header-right text-end col-md-6 col-8">
            <div class="form-group breadcrumb-right">
                <button class="px-2 btn-primary btn-sm waves-effect waves-float waves-light approval-multiple-btn"
                    data-bs-target="#filter" data-bs-toggle="modal">
                    <i data-feather="filter"></i>
                </button>
            </div>
        </div>
    </div>

    <div class="content-body dasboardnewbody">
        <section id="chartjs-chart">
            <div class="row">
                <div class="col-md-6 col-12">
                    <div id="employeesLoaderSpinner" class="card spinnerTab" style="display: none;">
                        <i class="fas fa-spinner fa-spin fa-2x" style="margin-bottom: 10px;"></i>
                        <p>Loading...</p>
                    </div>
                    <div class="card" id="employeesSpinner">
                        <div class="card-header newheader d-flex justify-content-between align-items-start">
                            <div class="header-left">
                                <h4 class="card-title">Employees</h4>
                                <p class="card-text">Info Details</p>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div id="donut-opentask"></div>
                                </div>
                                <div class="col-md-6">
                                    <div class="empluyeenewdashdetaiul">
                                        <div class="holiday-box">
                                            <div><span>Total Registered</span></div>
                                            <div>
                                                <h3> {{ $employeeDetails['total_emp'] ?? 0 }} </h3>
                                            </div>
                                        </div>
                                        <div class="holiday-box">
                                            <div><span>Mobile Users</span></div>
                                            <div>
                                                <h3> {{ $employeeDetails['app_user_emp'] ?? 0 }} </h3>
                                            </div>
                                        </div>

                                        <div class="holiday-box">
                                            <div><span>Device Users</span></div>
                                            <div>
                                                <h3> {{ $employeeDetails['device_user_emp'] ?? 0 }} </h3>
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="holiday-box d-block">
                                            <div class="d-flex justify-content-between">
                                                <div><span>On Roll</span></div>
                                                <a href="{{ $orgUrl }}/employees" target="_blank">
                                                    <div>
                                                        <h3>
                                                            <span class="badge rounded-pill badge-light-primary">
                                                                {{ $employeeDetails['on_roll_emp'] ?? 0 }}
                                                            </span>
                                                        </h3>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="d-flex justify-content-between mt-1">
                                                <h4>
                                                    <a href="{{ $orgUrl }}/employees?status=active" target="_blank">
                                                        {{ $employeeDetails['on_roll_emp_active'] ?? 0 }}
                                                        Active
                                                    </a>
                                                </h4>
                                                <h5>
                                                    <a href="{{ $orgUrl }}/employees?status=inactive" target="_blank">
                                                        {{ $employeeDetails['on_roll_emp_inactive'] ?? 0 }}
                                                        Inactive
                                                    </a>
                                                </h5>
                                                <h4>
                                                    <a href="{{ $orgUrl }}/employees?uses=app" target="_blank">
                                                        {{ $employeeDetails['onroll_app_user'] ?? 0 }}
                                                        Mobile
                                                    </a>
                                                </h4>
                                                <h4>
                                                    <a href="{{ $orgUrl }}/employees?uses=device" target="_blank">
                                                        {{ $employeeDetails['onroll_device_user'] ?? 0 }}
                                                        Device
                                                    </a>
                                                </h4>
                                            </div>
                                        </div>

                                        <div class="holiday-box d-block">
                                            <div class="d-flex justify-content-between">
                                                <div><span>Contractual</span></div>
                                                <a href="{{ $orgUrl }}/workmans" target="_blank">
                                                    <div>
                                                        <h3> {{ $employeeDetails['contractual_emp'] ?? 0 }} </h3>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="d-flex justify-content-between mt-1">
                                                <h4>
                                                    <a href="{{ $orgUrl }}/workmans?status=active" target="_blank">
                                                        {{ $employeeDetails['contractual_emp_active'] ?? 0 }}
                                                        Active
                                                    </a>
                                                </h4>
                                                <h5>
                                                    <a href="{{ $orgUrl }}/workmans?status=inactive" target="_blank">
                                                        {{ $employeeDetails['contractual_emp_inactive'] ?? 0 }}
                                                        Inactive
                                                    </a>
                                                </h5>
                                                <h4>
                                                    <a href="{{ $orgUrl }}/workmans?uses=app" target="_blank">
                                                        {{ $employeeDetails['countractual_app_user'] ?? 0 }}
                                                        Mobile
                                                    </a>
                                                </h4>
                                                <h4>
                                                    <a href="{{ $orgUrl }}/workmans?uses=device" target="_blank">
                                                        {{ $employeeDetails['countractual_device_user'] ?? 0 }}
                                                        Device
                                                    </a>
                                                </h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-12">
                    <div id="devicesLoaderSpinner" class="card spinnerTab" style="display: none;">
                        <i class="fas fa-spinner fa-spin fa-2x" style="margin-bottom: 10px;"></i>
                        <p>Loading...</p>
                    </div>
                    <div class="card" id="devicesSpinner">
                        <div class="card-header newheader d-flex justify-content-between align-items-start">
                            <div class="header-left">
                                <h4 class="card-title">Devices</h4>
                                <p class="card-text">Info Details</p>
                            </div>
                            {{-- <div class="header-right d-flex align-items-center mb-25">
                                <div class="btn-group new-btn-group">
                                    <input type="radio" class="btn-check" name="Devices" id="Admin1Devices" checked />
                                    <label class="btn btn-outline-primary" for="Admin1Devices"
                                        onclick="loadData('devices', 1)">Last Month</label>

                                    <input type="radio" class="btn-check" name="Devices" id="Months1Devices" />
                                    <label class="btn btn-outline-primary" for="Months1Devices"
                                        onclick="loadData('devices', 3)">3 Months</label>
                                </div>
                            </div> --}}
                        </div>
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-6">
                                    <div id="donut-apptask"></div>
                                </div>
                                <div class="col-md-6 devices-major-info">
                                    <div class="d-flex justify-content-between mt-2 mb-1">
                                        <div class="d-flex align-items-center">
                                            <i data-feather="calendar" class="font-medium-2 text-primary"></i>
                                            <span class="fw-bold ms-75 me-25">Attendance</span>
                                        </div>
                                        <div>
                                            <a href="{{ $orgUrl }}/devices?device_use={{ \App\Helpers\ConstantHelper::ATTENDANCE }}"
                                                target="_blank">
                                                <span id="attendance_devices"
                                                    class="badge rounded-pill badge-light-primary">
                                                    {{ $deviceDetails['attendance_devices'] ?? 0 }}
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between mt-2 mb-1">
                                        <div class="d-flex align-items-center">
                                            <i data-feather="log-in" class="font-medium-2 text-warning"></i>
                                            <span class="fw-bold ms-75 me-25">In Time Devices</span>
                                        </div>
                                        <div>
                                            <a href="{{ $orgUrl }}/devices?device_use={{ \App\Helpers\ConstantHelper::ATTENDANCE_IN }}"
                                                target="_blank">
                                                <span id="in_devices" class="badge rounded-pill badge-light-primary">
                                                    {{ $deviceDetails['in_devices'] ?? 0 }}
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between mt-2 mb-1">
                                        <div class="d-flex align-items-center">
                                            <i data-feather="external-link" class="font-medium-2 text-info"></i>
                                            <span class="fw-bold ms-75 me-25">Out Time Devices</span>
                                        </div>
                                        <div>
                                            <a href="{{ $orgUrl }}/devices?device_use={{ \App\Helpers\ConstantHelper::ATTENDANCE_OUT }}"
                                                target="_blank">
                                                <span id="out_devices" class="badge rounded-pill badge-light-primary">
                                                    {{ $deviceDetails['out_devices'] ?? 0 }}
                                                </span>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="d-flex justify-content-between mt-2 mb-1">
                                        <div class="d-flex align-items-center">
                                            <i data-feather="user-check" class="font-medium-2 text-success"></i>
                                            <span class="fw-bold ms-75 me-25">Authorized</span>
                                        </div>
                                        <div>
                                            <a href="{{ $orgUrl }}/devices?device_use={{ \App\Helpers\ConstantHelper::AUTHORIZATION }}"
                                                target="_blank">
                                                <span id="authorized_devices"
                                                    class="badge rounded-pill badge-light-primary">
                                                    {{ $deviceDetails['authorized_devices'] ?? 0 }}
                                                </span>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="d-flex justify-content-between mt-2 mb-1">
                                        <div class="d-flex align-items-center">
                                            <i data-feather="inbox" class="font-medium-2 text-danger"></i>
                                            <span class="fw-bold ms-75 me-25">Canteen</span>
                                        </div>
                                        <div>
                                            <a href="{{ $orgUrl }}/devices?device_use={{ \App\Helpers\ConstantHelper::CANTEEN }}"
                                                target="_blank">
                                                <span id="canteen_devices" class="badge rounded-pill badge-light-primary">
                                                    {{ $deviceDetails['canteen_devices'] ?? 0 }}
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between mt-2 mb-1">
                                        <div class="d-flex align-items-center">
                                            <i data-feather="truck" class="font-medium-2 text-danger"></i>
                                            <span class="fw-bold ms-75 me-25">Trip</span>
                                        </div>
                                        <div>
                                            <a href="{{ $orgUrl }}/devices?device_use=trip-kiosk" target="_blank">
                                                <span id="trip-kiosk" class="badge rounded-pill badge-light-primary">
                                                    {{ $deviceDetails['trip_devices'] ?? 0 }}
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="col-md-12 col-12">
                    <div id="attloaderSpinner" class="card spinnerTab" style="display: none;">
                        <i class="fas fa-spinner fa-spin fa-2x" style="margin-bottom: 10px;"></i>
                        <p>Loading...</p>
                    </div>
                    <div class="card" id="AttandanceSpinner">
                        <div class="card-header newheader d-flex justify-content-between align-items-start">
                            <div class="header-left">
                                <h4 class="card-title">Attendance</h4>
                                <p class="card-text">Highest and Lowest Info</p>
                            </div>
                            <div class="header-right d-flex align-items-center mb-25">
                                <div class="btn-group new-btn-group">
                                    <input type="radio" class="btn-check" name="Attendance" id="Admin1Attendance"
                                        checked />
                                    <label class="btn btn-outline-primary" for="Admin1Attendance"
                                        onclick="loadData('attendance', 1, '#attloaderSpinner','#AttandanceSpinner')">Last
                                        Month</label>
                                    <input type="radio" class="btn-check" name="Attendance" id="Months1Attendance" />
                                    <label class="btn btn-outline-primary" for="Months1Attendance"
                                        onclick="loadData('attendance', 3, '#attloaderSpinner','#AttandanceSpinner')">3
                                        Months</label>
                                    <input type="radio" class="btn-check" name="Attendance" id="Months6Attendance" />
                                    <label class="btn btn-outline-primary" for="Months6Attendance"
                                        onclick="loadData('attendance', 6, '#attloaderSpinner','#AttandanceSpinner')">6
                                        Months</label>
                                    <input type="radio" class="btn-check" name="Attendance" id="Months9Attendance" />
                                    <label class="btn btn-outline-primary" for="Months9Attendance"
                                        onclick="loadData('attendance', 9, '#attloaderSpinner','#AttandanceSpinner')">9
                                        Months</label>
                                    <input type="radio" class="btn-check" name="Attendance" id="Months12Attendance" />
                                    <label class="btn btn-outline-primary" for="Months12Attendance"
                                        onclick="loadData('attendance', 12, '#attloaderSpinner','#AttandanceSpinner')">12
                                        Months</label>
                                </div>
                                <a href="javascript:void(0);" title="Export to Excel" class="ml-1"
                                    onclick="exportAttendanceDetails()">
                                    <i data-feather="download" style="width:18px;height:18px;"></i>
                                </a>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div id="chartCanvas" class="col-md-9">
                                    <canvas class="bar-chart-ex chartjs" data-height="265"></canvas>
                                </div>
                                <div class="col-md-3">
                                    <div
                                        class="row justify-content-center align-items-center myteam-numb loremnumbspan newdashnumber-design">
                                        <div class="col-6 reworknumber">
                                            <h6 id="on-roll-min-max">
                                                {{ $attendanceDetails['employeeMaxAttendanceCount'] ?? 0 }}/{{ $attendanceDetails['employeeMinAttendanceCount'] ?? 0 }}
                                                <span class="minmax">Max/Min</span>
                                                <span>On Roll</span>
                                            </h6>
                                        </div>
                                        <div class="col-6 reworknumber">
                                            <h6 id="contractual-roll-min-max">
                                                {{ $attendanceDetails['workmanMaxAttendanceCount'] ?? 0 }}/{{ $attendanceDetails['workmanMinAttendanceCount'] ?? 0 }}
                                                <span class="minmax">Max/Min</span>
                                                <span>Contractual</span>
                                            </h6>
                                        </div>
                                    </div>

                                    <div class="row regulariandlatepunch">
                                        <div class="col-6 mb-1">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="avatar bg-light-info mb-1">
                                                        <a href="{{ $orgUrl }}/attendance-logs?attendance_type=REGULARIZE&date_range={{ $attendanceDetails['startDate'] ?? '' }} - {{ $attendanceDetails['endDate'] ?? '' }}"
                                                            target="_blank">
                                                            <div class="avatar-content">
                                                                <i data-feather="user-check"></i>
                                                            </div>
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="my-auto">
                                                        <h4 class="fw-bolder mb-0" id="regularized_count">
                                                            {{ $attendanceDetails['otherAttendanceDetails']['regularized_count'] ?? 0 }}
                                                        </h4>
                                                        <p class="mb-0">Regularized</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6 mb-1">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="avatar bg-light-danger mb-1">
                                                        <a href="{{ $orgUrl }}/attendance-logs?late=1&date_range={{ $attendanceDetails['startDate'] ?? '' }} - {{ $attendanceDetails['endDate'] ?? '' }}"
                                                            target="_blank">
                                                            <div class="avatar-content">
                                                                <i data-feather="user-minus"></i>
                                                            </div>
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="my-auto">
                                                        <h4 class="fw-bolder mb-0" id="late_comer_count">
                                                            {{ $attendanceDetails['otherAttendanceDetails']['late_comer_count'] ?? 0 }}
                                                        </h4>
                                                        <p class="mb-0">Late Punch In</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="col-md-12 col-12">
                    <div id="overloaderSpinner" class="card spinnerTab" style="display: none;">
                        <i class="fas fa-spinner fa-spin fa-2x" style="margin-bottom: 10px;"></i>
                        <p>Loading...</p>
                    </div>
                    <div class="card" id="overtimeSpinner">
                        <div class="card-header newheader d-flex justify-content-between align-items-start">
                            <div class="header-left">
                                <h4 class="card-title">Overtime in Hrs</h4>
                                <p class="card-text">Actual and Approved Info</p>
                            </div>
                            <div class="header-right d-flex align-items-center mb-25">
                                <div class="btn-group new-btn-group">
                                    <input type="radio" class="btn-check" name="Overtime" id="Admin1Overtime"
                                        checked />
                                    <label class="btn btn-outline-primary" for="Admin1Overtime"
                                        onclick="loadData('overtime', 1,'#overloaderSpinner','#overtimeSpinner')">Last
                                        Month</label>

                                    <input type="radio" class="btn-check" name="Overtime" id="Months3Overtime" />
                                    <label class="btn btn-outline-primary" for="Months3Overtime"
                                        onclick="loadData('overtime', 3,'#overloaderSpinner','#overtimeSpinner')">3
                                        Months</label>

                                    <input type="radio" class="btn-check" name="Overtime" id="Months6vertime" />
                                    <label class="btn btn-outline-primary" for="Months6vertime"
                                        onclick="loadData('overtime', 6, '#overloaderSpinner','#overtimeSpinner')">6
                                        Months</label>

                                    <input type="radio" class="btn-check" name="Overtime" id="Months9vertime" />
                                    <label class="btn btn-outline-primary" for="Months9vertime"
                                        onclick="loadData('overtime', 9, '#overloaderSpinner','#overtimeSpinner')">9
                                        Months</label>

                                    <input type="radio" class="btn-check" name="Overtime" id="Months12vertime" />
                                    <label class="btn btn-outline-primary" for="Months12vertime"
                                        onclick="loadData('overtime', 12, '#overloaderSpinner','#overtimeSpinner')">12
                                        Months</label>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-9">
                                    <canvas class="assignedtask-chart-ex chartjs" data-height="250"></canvas>
                                </div>
                                <div class="col-md-3 newdashtask-overytime">
                                    <div class="card task-card-body">
                                        <div class="card-body">
                                            <span class="badge rounded-pill badge-light-primary">On Roll</span>
                                            <h3>Overtime Hrs</h3>
                                            <div class="task-avtarboxpaper">
                                                <h4>
                                                    <span id="onroll-actual">
                                                        <i data-feather='file-text' class="text-danger"></i>
                                                        {{ $overtimeDetails['employeeActualOt'] ?? 0 }} Actual
                                                    </span>
                                                    <span id="onroll-approved"><i data-feather='check-circle'
                                                            class="text-success"></i>
                                                        {{ $overtimeDetails['employeeApprovedOt'] ?? 0 }} Approved
                                                    </span>
                                                </h4>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card task-card-body">
                                        <div class="card-body">
                                            <span class="badge rounded-pill badge-light-primary">Contractual</span>
                                            <h3>Overtime Hrs</h3>
                                            <div class="task-avtarboxpaper">
                                                <h4>
                                                    <span id="contractual-actual">
                                                        <i data-feather='file-text' class="text-danger"></i>
                                                        {{ $overtimeDetails['contractualActualOt'] ?? 0 }} Actual
                                                    </span>
                                                    <span id="contractual-approved">
                                                        <i data-feather='check-circle' class="text-success"></i>
                                                        {{ $overtimeDetails['contractualApprovedOt'] ?? 0 }} Approved
                                                    </span>
                                                </h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-12">
                    <div id="leaveloaderSpinner" class="card spinnerTab" style="display: none;">
                        <i class="fas fa-spinner fa-spin fa-2x" style="margin-bottom: 10px;"></i>
                        <p>Loading...</p>
                    </div>
                    <div class="card overtimechart" id='leaveSpinner'>
                        <div class="card-header newheader d-flex justify-content-between align-items-start">
                            <div class="header-left">
                                <h4 class="card-title">Leave Info</h4>
                                <p class="card-text">Info Details</p>
                            </div>
                            <div class="header-right d-flex align-items-center mb-25">
                                <div class="btn-group new-btn-group">
                                    <input type="radio" class="btn-check" name="Leave" id="Admin1Leave" checked />
                                    <label class="btn btn-outline-primary" for="Admin1Leave"
                                        onclick="loadData('leave', 1, '#leaveloaderSpinner','#leaveSpinner')">Last
                                        Month</label>
                                    <input type="radio" class="btn-check" name="Leave" id="Months3Leave" />
                                    <label class="btn btn-outline-primary" for="Months3Leave"
                                        onclick="loadData('leave', 3, '#leaveloaderSpinner','#leaveSpinner')">3
                                        Months</label>
                                    <input type="radio" class="btn-check" name="Leave" id="Months9Leave" />
                                    <label class="btn btn-outline-primary" for="Months9Leave"
                                        onclick="loadData('leave', 6, '#leaveloaderSpinner','#leaveSpinner')">6
                                        Months</label>
                                    <input type="radio" class="btn-check" name="Leave" id="Months9Leave" />
                                    <label class="btn btn-outline-primary" for="Months9Leave"
                                        onclick="loadData('leave', 9, '#leaveloaderSpinner','#leaveSpinner')">9
                                        Months</label>
                                    <input type="radio" class="btn-check" name="Leave" id="Months12Leave" />
                                    <label class="btn btn-outline-primary" for="Months12Leave"
                                        onclick="loadData('leave', 12, '#leaveloaderSpinner','#leaveSpinner')">12
                                        Months</label>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-9">
                                    <canvas class="leavebar-chart-ex chartjs" data-height="275"></canvas>
                                </div>
                                <div class="col-md-3 myteam-numb">
                                    <div class="reworknumber text-center">
                                        <h3>
                                            <a href="{{ $orgUrl }}/leave-types" target="_blank">
                                                <strong id="leave_types">
                                                    <span class="badge rounded-pill badge-light-primary">

                                                        {{ $leaveDetails['leave_types'] ?? 0 }}
                                                    </span>
                                                </strong>
                                            </a>
                                        </h3>
                                        <p class="mb-0">Total Leave Type</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-12">
                    <div id="payrollLoaderSpinner" class="card spinnerTab" style="display: none;">
                        <i class="fas fa-spinner fa-spin fa-2x" style="margin-bottom: 10px;"></i>
                        <p>Loading...</p>
                    </div>
                    <div class="card overtimechart" id="payrollSpinner">
                        <div class="card-header newheader d-flex justify-content-between align-items-start">
                            <div class="header-left">
                                <h4 class="card-title">Payroll Configured</h4>
                                <p class="card-text">Unit Wise Details</p>
                            </div>
                            <div class="header-right d-flex align-items-center mb-25">
                                {{-- <div class="btn-group new-btn-group">
                                    <input type="radio" class="btn-check" name="Payroll" id="Admin1Payroll" checked />
                                    <label class="btn btn-outline-primary" for="Admin1Payroll"
                                        onclick="loadData('payroll', 1)">Last Month</label>

                                    <input type="radio" class="btn-check" name="Payroll" id="Months1Payroll" />
                                    <label class="btn btn-outline-primary" for="Months1Payroll"
                                        onclick="loadData('payroll', 3)">3 Months</label>
                                </div> --}}
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row align-items-start">
                                <div class="col-md-4 px-0">
                                    <div class="configured-locasect ms-1">
                                        <div class="row mt-2">
                                            <div class="col-md-3">
                                                <div class="avatar bg-light-primary m-0">
                                                    <div class="avatar-content">
                                                        <i data-feather="map-pin"></i>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-9">
                                                <h2 id="configured-locations" class="fw-bolder text-primary">
                                                    {{ count($organizationData) }} Units
                                                </h2>
                                                <p class="card-text">Configured Location</p>
                                            </div>
                                        </div>
                                        <div class="row mt-2">
                                            <div class="col-md-3">
                                                <div class="avatar bg-light-danger m-0">
                                                    <div class="avatar-content">
                                                        <i data-feather="users"></i>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-9">
                                                <h2 id="employees-mapped" class="fw-bolder text-danger">
                                                    {{ $employeeDetails['active_emp'] ?? 0 }}
                                                </h2>
                                                <p class="card-text">Employee Mapped</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="line-area-chart-2"></div>
                                </div>


                                <div class="col-md-8 ps-0 table-responsive" id="payrollTable"
                                    style="overflow-y: scroll; max-height: 252px;">
                                    <table class="table border payrollconfigured">
                                        <thead>
                                            <tr>
                                                <th>Unit</th>
                                                <th>Registered</th>
                                                <th>Generated</th>
                                            </tr>
                                        </thead>
                                        <tbody id="payrollTableBody">
                                            @foreach ($organizationData as $organization)
                                                <tr>
                                                    <td class="text-dark fw-bolder">
                                                        <strong>{{ $organization->name }}</strong>
                                                    </td>
                                                    <td>
                                                        <span class="badge rounded-pill badge-light-secondary">
                                                            {{ $organization->employees_count ?? 0 }}
                                                        </span>
                                                    </td>
                                                    <td>
                                                        <span class="badge rounded-pill badge-light-primary me-1">
                                                            {{ $organization->pay_slips_count ?? 0 }}
                                                        </span>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-12 col-12">
                    <div id="adminLoaderSpinner" class="card spinnerTab" style="display: none;">
                        <i class="fas fa-spinner fa-spin fa-2x" style="margin-bottom: 10px;"></i>
                        <p>Loading...</p>
                    </div>
                    <div class="card" id="adminSpinner">
                        <div class="card-header newheader d-flex justify-content-between align-items-start">
                            <div class="header-left">
                                <h4 class="card-title">Admin User</h4>
                                <p class="card-text">Info Details</p>
                            </div>

                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-8">
                                    <canvas class="horizontal-bar-chart-ex chartjs" data-height="335"></canvas>
                                </div>
                                <div class="col-md-4">
                                    <div class="card border p-1 m-0">
                                        <div class="card-header d-flex justify-content-between align-items-center">
                                            <h4 class="card-title">Licence Overview</h4>
                                            <i data-feather="help-circle"
                                                class="font-medium-3 text-muted cursor-pointer"></i>
                                        </div>
                                        <div class="card-body p-0">
                                            <div id="goal-overview-radial-bar-chart" class="my-2"></div>
                                            <div class="row border-top text-center mx-0">
                                                <div class="col-4 border-end py-1">
                                                    <p class="card-text text-primary mb-0">Total</p>
                                                    <h3 id="total-licence" class="fw-bolder text-primary  mb-0">
                                                        {{ $licenseDetails['totalLicense'] ?? 0 }}</h3>
                                                    </h3>
                                                </div>
                                                <div class="col-4 border-end py-1">
                                                    <p class="card-text text-muted mb-0">Consumed</p>
                                                    <h3 id="consumed-licence" class="fw-bolder mb-0">
                                                        {{ $licenseDetails['consumedLicense'] ?? 0 }}</h3>
                                                    </h3>
                                                </div>
                                                <div class="col-4 py-1">
                                                    <p class="card-text text-muted mb-0">Vacant</p>
                                                    <h3 id="vacant-licence" class="fw-bolder mb-0">
                                                        {{ $licenseDetails['balanceLicense'] ?? 0 }}</h3>
                                                    </h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>

                <div class="col-md-12 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">Organization Info</h4>
                                <p class="card-text">Location-wise Employee Details</p>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <form method="GET" action="">
                                    <div class="row mb-2">
                                        <div class="col-md-2">
                                            <label>Year</label>
                                            <select name="year" class="form-select">
                                                <option value="">Select Year</option>
                                                @foreach(range(date('Y'), date('Y')-5) as $y)
                                                    <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>
                                                        {{ $y }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-2">
                                            <label>Month</label>
                                            <select name="month" class="form-select">
                                                <option value="">Select Month</option>
                                                @foreach($months as $key => $monthName)
                                                    <option value="{{ $key + 1 }}" {{ $month == $key + 1 ? 'selected' : '' }}>
                                                        {{ $monthName }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-2">
                                            <label>Department</label>
                                            <select name="department_id[]" class="form-select">
                                                <option value="">All Departments</option>
                                                @foreach($departmentsBasedOnChildOrg as $department)
                                                    <option value="{{ $department->id }}"
                                                        {{ in_array($department->id, request('department_id', [])) ? 'selected' : '' }}>
                                                        {{ $department->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label" for="date_range">Date range</label>
                                            <input type="text" id="date_range" name="date_range"
                                                value="{{ request()->input('date_range', $dateRange) }}" class="form-control daterangebg">
                                        </div>
                                        <div class="col-md-3">
                                            <button type="submit" class="btn btn-primary mt-1">Filter</button>
                                            <a href="{{ $orgUrl . '/analytics-dashboard' }}" class="btn btn-secondary mt-1">Reset</a>
                                        </div>
                                    </div>
                                </form>
                                <table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Location</th>
                                            <th>Employees</th>
                                            <th>Active Employees</th>
                                            <th>Ideal Working Days(Site)</th>
                                            <th>Present Days (Biometric)</th>
                                            <th>Adherence (Biometric)</th>
                                        </tr>
                                    </thead>

                                    <tbody id="locationWiseEmployeesTableBody">
                                        <tr>
                                            <td colspan="6" class="text-center">
                                                <i class="fas fa-spinner fa-spin"></i> Loading...
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-12 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">Employee Info</h4>
                                <p class="card-text">Department/Subdepartment-wise Employee Details</p>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Department</th>
                                            <th>SubDepartment</th>
                                            <th>Total Employee</th>
                                            <th>Present</th>
                                            <th>Absent</th>
                                        </tr>
                                    </thead>
                                    <tbody id="subDepartmentCardsTableBody">
                                        <tr>
                                            <td colspan="5" class="text-center">
                                                <i class="fas fa-spinner fa-spin"></i> Loading...
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal modal-slide-in fade filterpopuplabel" id="filter">
                <div class="modal-dialog sidebar-sm">
                    <form class="add-new-record modal-content pt-0" method="GET">
                        <div class="modal-header mb-1">
                            <h5 class="modal-title" id="exampleModalLabel">Apply Filter</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close">×</button>
                        </div>
                        <div class="modal-body flex-grow-1">
                            <div class="mb-1">
                                <label class="form-label" for="fp-range">Select Organizations</label>
                                <select class="form-control select2" name="organization_id">
                                    <option value=" " @if (!Request::get('organization_id')) selected @endif>All</option>
                                    @foreach ($organizations as $organization)
                                        <option
                                            value="{{ $organization->id }}"{{ Request::get('organization_id') == $organization->id ? 'selected' : '' }}>
                                            {{ ucfirst($organization->name) }}</option>
                                    @endforeach
                                </select>
                            </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" 
                                        value="{{ request('date') ? request('date') : date('Y-m-d') }}"  class="form-control flatpickr-basic-custom">
                                </div>
                            </div>
                            <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>
                            <div class="modal-footer justify-content-start">
                                <button type="submit" class="btn btn-primary data-submit mr-1">Apply</button>
                                <a href="{{ $orgUrl . '/analytics-dashboard' }}" class="btn btn-outline-secondary"
                                    data-dismiss="modal">Clear
                                </a>
                            </div>
                    </form>
                </div>
            </div>
        </section>
    </div>
@endsection
@push('footer-script')
    <script src="/dashboard-assets/js/apexcharts.min.js"></script>
    <script src="/dashboard-assets/js/chart.min.js"></script>
    <script src="/dashboard-assets/js/chart-apex.js"></script>
    <script src="/dashboard-assets/js/chart-chartjs.js"></script>
    <script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>
    <script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
    <script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
    <script type="text/javascript" src="/assets/js/daterangepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="/assets/css/daterangepicker.css" />
    <script>
        let url = app_url + '/' + '{{ $organizationAlias }}/';
        async function fetchData(type, duration_in_month, loderId, mainDivId) {
            let apiUrl = '';
            var app_url = "{{ config('app.url') }}";
            switch (type) {
                case 'attendance':
                    apiUrl = app_url + `{{ $orgUrl }}/attendance-details`;
                    break;
                case 'devices':
                    apiUrl = app_url + `{{ $orgUrl }}/device-details`;
                    break;
                case 'overtime':
                    apiUrl = app_url + `{{ $orgUrl }}/overtime-details`;
                    break;
                case 'leave':
                    apiUrl = app_url + `{{ $orgUrl }}/leave-details`;
                    break;
                case 'payroll':
                    apiUrl = app_url + `{{ $orgUrl }}/payroll-details`;
                    break;
                case 'employee':
                    apiUrl = app_url + `{{ $orgUrl }}/employee-details`;
                    break;
                case 'license':
                    apiUrl = app_url + `{{ $orgUrl }}/license-details`;
                    break;
                case 'admin':
                    apiUrl = app_url + `{{ $orgUrl }}/admin-details`;
                    break;
                case 'departmentWise':
                    apiUrl = app_url + `{{ $orgUrl }}/department-wise-employee-details`;
                    break;
                case 'locationWise':
                    apiUrl = app_url + `{{ $orgUrl }}/location-wise-employee-details`;
                    break;
                default:
                    console.error('Invalid type provided');
                    return false;
            }

            const formData = new FormData();

            // Carry over whatever filters are already active on the current
            // page URL (organization_id, date, date_range, department_id,
            // month, year, ...) so ajax-loaded sections match the page filters.
            new URLSearchParams(window.location.search).forEach((value, key) => {
                formData.append(key, value);
            });

            const form = document.querySelector('.add-new-record');
            if (form) {
                Array.from(form.elements).forEach(element => {
                    if (element.name && element.type !== 'submit') {
                        formData.append(element.name, element.value);
                    }
                });
            }

            formData.set('duration_in_month', duration_in_month);

            try {
                $(loderId).show();
                $(mainDivId).hide();
                const response = await fetch(apiUrl, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    },
                });
                if (response.ok) {
                    $(loderId).hide();
                    $(mainDivId).show();
                    return await response.json();
                } else {
                    $(loderId).hide();
                    console.error(`Failed to fetch ${type} data: ${response.statusText}`);
                    return false;
                }
            } catch (error) {
                console.error(`Error fetching ${type} data:`, error);
                return false;
            }
        }

        async function loadData(type, duration_in_month, loderId, mainDivId) {
            const data = await fetchData(type, duration_in_month, loderId, mainDivId);
            if (data) {
                renderData(type, data, duration_in_month);
            } else {
                console.error(`Failed to load ${type} data`);
            }
        }

        function renderData(type, data, duration_in_month = null) {
            switch (type) {
                case 'attendance':
                    renderAttendanceDetails(data, duration_in_month);
                    break;
                case 'devices':
                    renderDeviceDetails(data);
                    break;
                case 'overtime':
                    renderOvertimeDetails(data);
                    break;
                case 'leave':
                    renderLeaveDetails(data);
                    break;
                case 'payroll':
                    renderPayrollDetails(data);
                    break;
                case 'employee':
                    renderEmployeeDetails(data);
                    break;
                case 'license':
                    renderLicenseDetails(data);
                    break;
                case 'admin':
                    renderAdminDetails(data);
                    break;
                case 'departmentWise':
                    renderDepartmentWiseDetails(data);
                    break;
                case 'locationWise':
                    renderLocationWiseDetails(data);
                    break;
            }
            if (feather) {
                feather.replace({
                    width: 14,
                    height: 14
                });
            }
        }

        let currentAttendanceDuration = 1;

        function exportAttendanceDetails() {
            // Mirror fetchData's filter resolution so the export matches
            // whatever organization/department/date filters are active on
            // the page (otherwise it falls back to broader, unfiltered data).
            const params = new URLSearchParams(window.location.search);

            const form = document.querySelector('.add-new-record');
            if (form) {
                Array.from(form.elements).forEach(element => {
                    if (element.name && element.type !== 'submit') {
                        params.set(element.name, element.value);
                    }
                });
            }

            params.set('duration_in_month', currentAttendanceDuration);

            document.location.href = `{{ $orgUrl }}/attendance-details-export?${params.toString()}`;
        }

        function renderAttendanceDetails(attendanceDetails, duration_in_month) {
            currentAttendanceDuration = duration_in_month;
            const formatAttendance = (count) => (count % 1 === 0 ? Math.floor(count) : count.toFixed(1)) || 0;

            document.getElementById('on-roll-min-max').innerHTML =
                `${formatAttendance(attendanceDetails.employeeMaxAttendanceCount / duration_in_month)}/
                ${formatAttendance(attendanceDetails.employeeMinAttendanceCount / duration_in_month)}
                <span class="minmax">Max/Min</span>
                <span>On Roll</span>`;

            document.getElementById('contractual-roll-min-max').innerHTML =
                `${formatAttendance(attendanceDetails.workmanMaxAttendanceCount / duration_in_month)}/
                ${formatAttendance(attendanceDetails.workmanMinAttendanceCount / duration_in_month)}
                <span class="minmax">Max/Min</span>
                <span>Contractual</span>`;

            document.getElementById('regularized_count').innerText = attendanceDetails.otherAttendanceDetails
                .regularized_count || 0;
            document.getElementById('late_comer_count').innerText = attendanceDetails.otherAttendanceDetails
                .late_comer_count || 0;
            window.attendanceChart(attendanceDetails.attendanceDetails, url + 'attendance-logs?' +
                '{{ http_build_query(request()->except('auth_user', 'auth_type')) }}');
        }

        function renderOvertimeDetails(overtimeDetails) {
            document.getElementById('onroll-actual').innerHTML =
                `<i data-feather='file-text'class="text-danger"></i> ${overtimeDetails.employeeActualOt || 0} Actual`;
            document.getElementById('onroll-approved').innerHTML =
                `<i data-feather='check-circle'class="text-success"></i> ${overtimeDetails.employeeApprovedOt || 0} Approved`;
            document.getElementById('contractual-actual').innerHTML =
                `<i data-feather='file-text' class="text-danger"></i> ${overtimeDetails.contractualActualOt || 0} Actual`;
            document.getElementById('contractual-approved').innerHTML =
                `<i data-feather='check-circle' class="text-success"></i> ${overtimeDetails.contractualApprovedOt || 0} Approved`;
            window.overtimeBarChart(overtimeDetails.overtimeDetails, url + 'overtime/monthly-actual-report?' +
                '{{ http_build_query(request()->except('auth_user', 'auth_type')) }}');
        }

        function renderLeaveDetails(leaveDetails) {
            document.getElementById('leave_types').innerText = leaveDetails.leave_types || 0;
            window.leaveChart(leaveDetails.leaveDetails, url + 'leave-approvals?tab1=all-requests&' +
                '{{ http_build_query(request()->except('auth_user', 'auth_type')) }}');
        }

        function renderDeviceDetails(deviceDetails) {
            document.querySelector('.devices-major-info').innerHTML =
                `<div class="d-flex justify-content-between mt-2 mb-1">
					<span class="fw-bold ms-75 me-25">Attendance</span>
					<span class="badge rounded-pill badge-light-primary">${deviceDetails.attendance_devices || 0}</span>
				</div>
				<div class="d-flex justify-content-between mt-2 mb-1">
					<span class="fw-bold ms-75 me-25">In Time Devices</span>
					<span class="badge rounded-pill badge-light-primary">${deviceDetails.in_devices || 0}</span>
				</div>
				<div class="d-flex justify-content-between mt-2 mb-1">
					<span class="fw-bold ms-75 me-25">Out Time Devices</span>
					<span class="badge rounded-pill badge-light-primary">${deviceDetails.out_devices || 0}</span>
				</div>
				<div class="d-flex justify-content-between mt-2 mb-1">
					<span class="fw-bold ms-75 me-25">Authorized</span>
					<span class="badge rounded-pill badge-light-primary">${deviceDetails.authorized_devices || 0}</span>
				</div>
				<div class="d-flex justify-content-between mt-2 mb-1">
					<span class="fw-bold ms-75 me-25">Canteen</span>
					<span class="badge rounded-pill badge-light-primary">${deviceDetails.canteen_devices || 0}</span>
				</div>`;
            window.createDonutChartAppTask(deviceDetails.active_device, deviceDetails.inactive_device, url + 'devices?' +
                '{{ http_build_query(request()->except('auth_user', 'auth_type')) }}');
        }

        function renderPayrollDetails(payrollDetails) {
            document.getElementById('configured-locations').innerText = `${payrollDetails.organizations.length || 0} Units`;
            const payrollTableBody = document.getElementById('payrollTableBody');
            payrollTableBody.innerHTML = '';
            payrollDetails.organizations.forEach(organization => {
                const row =
                    `<tr>
						<td class="text-dark fw-bolder"><strong>${organization.name}</strong></td>
						<td><span class="badge rounded-pill badge-light-secondary">${organization.employees_count || 0} </span></td>
						<td><span class="badge rounded-pill badge-light-primary me-1">${organization.pay_slips_count || 0}</span></td>
					</tr>`;
                payrollTableBody.innerHTML += row;
            });
        }

        function renderEmployeeDetails(employeeDetails) {
            document.querySelector('.empluyeenewdashdetaiul').innerHTML = `
                <div class="holiday-box">
                    <div><span>Total Registered</span></div>
                    <div><h3>${employeeDetails.total_emp || 0}</h3></div>
                </div>
                <div class="holiday-box">
                    <div><span>Mobile Users</span></div>
                    <div><h3>${employeeDetails.app_user_emp || 0}</h3></div>
                </div>
                <div class="holiday-box">
                    <div><span>Device Users</span></div>
                    <div><h3>${employeeDetails.device_user_emp || 0}</h3></div>
                </div>
                <hr>
                <div class="holiday-box d-block">
                    <div class="d-flex justify-content-between">
                        <div><span>On Roll</span></div>
                        <a href="${url}employees" target="_blank">
                            <div><h3><span class="badge rounded-pill badge-light-primary">${employeeDetails.on_roll_emp || 0}</span></h3></div>
                        </a>
                    </div>
                    <div class="d-flex justify-content-between mt-1">
                        <h4><a href="${url}employees?status=active" target="_blank">${employeeDetails.on_roll_emp_active || 0} Active</a></h4>
                        <h5><a href="${url}employees?status=inactive" target="_blank">${employeeDetails.on_roll_emp_inactive || 0} Inactive</a></h5>
                        <h4><a href="${url}employees?uses=app" target="_blank">${employeeDetails.onroll_app_user || 0} Mobile</a></h4>
                        <h4><a href="${url}employees?uses=device" target="_blank">${employeeDetails.onroll_device_user || 0} Device</a></h4>
                    </div>
                </div>
                <div class="holiday-box d-block">
                    <div class="d-flex justify-content-between">
                        <div><span>Contractual</span></div>
                        <a href="${url}workmans" target="_blank">
                            <div><h3>${employeeDetails.contractual_emp || 0}</h3></div>
                        </a>
                    </div>
                    <div class="d-flex justify-content-between mt-1">
                        <h4><a href="${url}workmans?status=active" target="_blank">${employeeDetails.contractual_emp_active || 0} Active</a></h4>
                        <h5><a href="${url}workmans?status=inactive" target="_blank">${employeeDetails.contractual_emp_inactive || 0} Inactive</a></h5>
                        <h4><a href="${url}workmans?uses=app" target="_blank">${employeeDetails.countractual_app_user || 0} Mobile</a></h4>
                        <h4><a href="${url}workmans?uses=device" target="_blank">${employeeDetails.countractual_device_user || 0} Device</a></h4>
                    </div>
                </div>
            `;
            document.getElementById('employees-mapped').innerText = employeeDetails.active_emp || 0;
            window.createDonutChartOpenTask(employeeDetails.active_emp, employeeDetails.inactive_emp, url +
                'employees?' + '{{ http_build_query(request()->except('auth_user', 'auth_type')) }}');
        }

        function renderLicenseDetails(licenseDetails) {
            document.getElementById('total-licence').innerText = licenseDetails.totalLicense || 0;
            document.getElementById('consumed-licence').innerText = licenseDetails.consumedLicense || 0;
            document.getElementById('vacant-licence').innerText = licenseDetails.balanceLicense || 0;
        }

        function renderAdminDetails(adminTaskDetails) {
            window.createSideBarAdminTask(adminTaskDetails, url + 'managers?' +
                '{{ http_build_query(request()->except('auth_user', 'auth_type')) }}');
        }

        function renderDepartmentWiseDetails(subDepartmentCards) {
            const tbody = document.getElementById('subDepartmentCardsTableBody');
            tbody.innerHTML = '';

            if (!subDepartmentCards.length) {
                tbody.innerHTML = '<tr><td colspan="5" class="text-center">No Data Found</td></tr>';
                return;
            }

            const groupedData = {};
            subDepartmentCards.forEach(row => {
                const deptId = row.department_id;
                if (!groupedData[deptId]) groupedData[deptId] = [];
                groupedData[deptId].push(row);
            });

            Object.values(groupedData).forEach(rows => {
                rows.forEach((row, index) => {
                    let html = '<tr>';
                    if (index === 0) {
                        html += `<td rowspan="${rows.length}">${(row.department && row.department.name) || '-'}</td>`;
                    }
                    html += `
                        <td>${row.name || '-'}</td>
                        <td>${row.total_members}</td>
                        <td>${row.present_members}</td>
                        <td>${row.absent_members}</td>
                    </tr>`;
                    tbody.innerHTML += html;
                });
            });
        }

        function renderLocationWiseDetails(data) {
            const tbody = document.getElementById('locationWiseEmployeesTableBody');
            const locations = data.locationWiseEmployees || [];
            tbody.innerHTML = '';

            if (!locations.length) {
                tbody.innerHTML = '<tr><td colspan="6" class="text-center">No Data Found</td></tr>';
                return;
            }

            const params = new URLSearchParams(window.location.search);
            params.set('start_date', data.startDate);
            params.set('end_date', data.endDate);

            locations.forEach(location => {
                params.set('location_id', location.id);
                const detailsUrl = `{{ route('location.employee.details') }}?${params.toString()}`;
                tbody.innerHTML += `
                    <tr>
                        <td>${location.name || 'N/A'}</td>
                        <td>${location.total_employees || 0}</td>
                        <td><a href="${detailsUrl}" target="_blank" class="text-primary fw-bold">${location.active_employees || 0}</a></td>
                        <td>${location.paid_days || 0}</td>
                        <td>${location.present_days || 0}</td>
                        <td>${location.adherence || 0}%</td>
                    </tr>`;
            });
        }

        $(window).on("load", function() {
            // Fire every dashboard section's data request in parallel; each
            // renders independently as soon as it resolves. Promise.all is used
            // purely so we know when the whole dashboard has finished loading.
            Promise.all([
                loadData('employee', 1, '#employeesLoaderSpinner', '#employeesSpinner'),
                loadData('devices', 1, '#devicesLoaderSpinner', '#devicesSpinner'),
                loadData('license', 1),
                loadData('admin', 1, '#adminLoaderSpinner', '#adminSpinner'),
                loadData('departmentWise', 1),
                loadData('locationWise', 1),
                loadData('attendance', 1, '#attloaderSpinner', '#AttandanceSpinner'),
                loadData('overtime', 1, '#overloaderSpinner', '#overtimeSpinner'),
                loadData('leave', 1, '#leaveloaderSpinner', '#leaveSpinner'),
                loadData('payroll', 1, '#payrollLoaderSpinner', '#payrollSpinner'),
            ]).catch(error => console.error('Error loading dashboard data:', error));
        });
    </script>
    <script>
        $(document).ready(function () {
            initializeDateRange($('#month').val(), $('#year').val());
            $('#month, #year').on('change', function () {
                initializeDateRange($('#month').val(), $('#year').val());
            });
        });

        $(function() {
            $('#year').on('change', function() {
                var selectedYear = $(this).val();
                var currentYear = new Date().getFullYear();
                var currentMonth = new Date().getMonth() + 1;

                $('#month option').each(function() {
                    var monthValue = parseInt($(this).val(), 10);
                    if (selectedYear == currentYear) {
                        if (monthValue > currentMonth) {
                            $(this).prop('disabled', true);
                        } else {
                            $(this).prop('disabled', false);
                        }
                    } else {
                        $(this).prop('disabled', false);
                    }
                });
            });
        });
        flatpickr("#date", {
            dateFormat: "Y-m-d",
        });
    </script>
    <script>
        function initializeDateRange(month = null, year = null, orgType = null) {
            if (month && year) {
                month = String(month).padStart(2, '0');
                let current = moment(month + '/01/' + year, 'MM/DD/YYYY');
                let fromDate, toDate;

                fromDate = current.clone().subtract(1, 'month').startOf('month').format('MM/DD/YYYY');
                toDate = current.clone().endOf('month').format('MM/DD/YYYY');
                
                $('input[name="date_range"]').daterangepicker({
                    minDate: fromDate,
                    maxDate: toDate,
                    startDate: fromDate,
                    endDate: toDate,
                });

            } else {
                $('input[name="date_range"]').daterangepicker();
            }
        }
    </script>
@endpush