@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">
@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 class="card">
                        <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 class="card">
                        <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>
                            </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 class="card overtimechart">
                        <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 class="card">
                        <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>

            <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="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="/dashboard-assets/js/card-statistics.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/pages/dashboard-analytics.js"></script>
    <script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
    <script src="/app-assets/js/scripts/pages/dashboard-ecommerce.js"></script>
    <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;
                default:
                    console.error('Invalid type provided');
                    return false;
            }

            const formData = new FormData();
            formData.append('duration_in_month', duration_in_month);

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

            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;
            }
            if (feather) {
                feather.replace({
                    width: 14,
                    height: 14
                });
            }
        }

        function renderAttendanceDetails(attendanceDetails, 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`;
            document.getElementById('employees-mapped').innerText = payrollDetails.total_emp || 0;
            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;
            });
        }

        $(window).on("load", function() {
            // initial state of filter data last month start
            loadData('attendance', 1, '#attloaderSpinner', '#AttandanceSpinner')
            loadData('overtime', 1, '#overloaderSpinner', '#overtimeSpinner')
            loadData('leave', 1, '#leaveloaderSpinner', '#leaveSpinner')
            // End
            var leaveData = @json($leaveDetails);
            var deviceDetails = @json($deviceDetails);
            var employeeDetails = @json($employeeDetails);
            var attendanceDetails = @json($attendanceDetails);
            var overtimeDetails = @json($overtimeDetails);
            var adminTaskDetails = @json($adminDetails);

            window.createDonutChartOpenTask(employeeDetails.active_emp, employeeDetails.inactive_emp, url +
                'employees?' + '{{ http_build_query(request()->except('auth_user', 'auth_type')) }}');
            window.createDonutChartAppTask(deviceDetails.active_device, deviceDetails.inactive_device, url +
                'devices?' + '{{ http_build_query(request()->except('auth_user', 'auth_type')) }}');
            window.attendanceChart(attendanceDetails.attendanceDetails, url + 'attendance-logs?' +
                '{{ http_build_query(request()->except('auth_user', 'auth_type')) }}');
            window.overtimeBarChart(overtimeDetails.overtimeDetails, url + 'overtime/monthly-actual-report?' +
                '{{ http_build_query(request()->except('auth_user', 'auth_type')) }}');
            window.leaveChart(leaveData.leaveDetails, url + 'leave-approvals?tab1=all-requests&' +
                '{{ http_build_query(request()->except('auth_user', 'auth_type')) }}');
            window.createSideBarAdminTask(adminTaskDetails, url + 'managers?' +
                '{{ http_build_query(request()->except('auth_user', 'auth_type')) }}');
        });
    </script>
@endpush