@extends('layouts.app', ['path' => 'dashboard'])
@section('title', 'Dashboard - HRMS')

@section('content')

    {{-- @can('dashboard.read|dashboard.view_stats') --}}
    <div class="content">

        <!-- Breadcrumb -->
        <div class="d-md-flex d-block align-items-center justify-content-between page-breadcrumb mb-3">
            <div class="my-auto mb-2">
                <h2 class="mb-1">Dashboard</h2>
            </div>

        </div>
        <!-- /Breadcrumb -->

        <!-- Welcome Wrap -->
        <div class="card border-0">
            <div class="card-body d-flex align-items-center justify-content-between flex-wrap pb-1">
                <div class="d-flex align-items-center mb-3">
                    <span class="avatar avatar-xl flex-shrink-0">
                        @if (session('user.image'))
                            <img src="data:image/png;base64,{{ session('user.image') }}"
                                class="img-fluid rounded-circle object-fit-cover" alt="img">
                        @else
                            <img src="{{ 'https://ui-avatars.com/api/?name=' . session('user.name') . '&color=7F9CF5&background=D9D9D9&color=fff&bold=true' }}"
                                class="img-fluid rounded-circle object-fit-cover" alt="img">
                        @endif
                    </span>
                    <div class="ms-3">
                        <h3 class="">
                            Welcome Back, {{ session()->get('user.name') }}

                        </h3>

                    </div>
                </div>

            </div>
        </div>
        <!-- /Welcome Wrap -->
        @can('dashboard.read')
            <div class="row">

                <!-- Widget Info -->
                <div class="col-xxl-8 d-flex">
                    <div class="row flex-fill">
                        @can('departments.read')
                            <div class="col-md-3 d-flex">
                                <div class="card flex-fill">
                                    <div class="card-body">
                                        <span class="avatar rounded-circle bg-primary mb-2">
                                            <i class="ti ti-building-skyscraper fs-16"></i>
                                        </span>
                                        <h6 class="fs-13 fw-medium text-default mb-1">Active Departments</h6>
                                        <h3 class="mb-3">{{ $dataCount['departments'][0] }}</h3>
                                        <a href="{{ route('department') }}" class="link-default">View All</a>
                                    </div>

                                </div>
                            </div>
                        @endcan

                        @can('departments.read')
                            <div class="col-md-3 d-flex">
                                <div class="card flex-fill">
                                    <div class="card-body">
                                        <span class="avatar rounded-circle bg-secondary mb-2">
                                            <i class="ti ti-users-group fs-16"></i>
                                        </span>
                                        <h6 class="fs-13 fw-medium text-default mb-1">Active Designations</h6>
                                        <h3 class="mb-3">{{ $dataCount['designations'][0] }}</h3>
                                        <a href="{{ route('designation') }}" class="link-default">View All</a>
                                    </div>
                                </div>
                            </div>
                        @endcan

                        @can('office_locations.read')
                            <div class="col-md-3 d-flex">
                                <div class="card flex-fill">
                                    <div class="card-body">
                                        <span class="avatar rounded-circle bg-info mb-2">
                                            <i class="ti ti-map-pins fs-16"></i>
                                        </span>
                                        <h6 class="fs-13 fw-medium text-default mb-1">Active Office Locations</h6>
                                        <h3 class="mb-3">{{ $dataCount['officeLocations'][0] }}</h3>
                                        <a href="{{ route('location') }}" class="link-default">View All</a>
                                    </div>
                                </div>
                            </div>
                        @endcan

                        @can('job_levels.read')
                            <div class="col-md-3 d-flex">
                                <div class="card flex-fill">
                                    <div class="card-body">
                                        <span class="avatar rounded-circle bg-pink mb-2">
                                            <i class="ti ti-briefcase fs-16"></i>
                                        </span>
                                        <h6 class="fs-13 fw-medium text-default mb-1">Active Job Levels</h6>
                                        <h3 class="mb-3">{{ $dataCount['jobLevels'][0] }}</h3>
                                        <a href="{{ route('joblevel') }}" class="link-default">View All</a>
                                    </div>
                                </div>
                            </div>
                        @endcan

                        @can('employment_types.read')
                            <div class="col-md-3 d-flex">
                                <div class="card flex-fill">
                                    <div class="card-body">
                                        <span class="avatar rounded-circle bg-purple mb-2">
                                            <i class="ti ti-category fs-16"></i>
                                        </span>
                                        <h6 class="fs-13 fw-medium text-default mb-1">Active Employment Types</h6>
                                        <h3 class="mb-3">{{ $dataCount['employeeTypes'][0] }}</h3>
                                        <a href="{{ route('employee.type') }}" class="link-default">View All</a>
                                    </div>
                                </div>
                            </div>
                        @endcan

                        @can('qualification_levels.read')
                            <div class="col-md-3 d-flex">
                                <div class="card flex-fill">
                                    <div class="card-body">
                                        <span class="avatar rounded-circle bg-danger mb-2">
                                            <i class="ti ti-book-2 fs-16"></i>
                                        </span>
                                        <h6 class="fs-13 fw-medium text-default mb-1">Active Qualifications</h6>
                                        <h3 class="mb-3">{{ $dataCount['qualificationLevels'][0] }}</h3>
                                        <a href="{{ route('qualificationLevel') }}" class="link-default">View All</a>
                                    </div>
                                </div>
                            </div>
                        @endcan

                        @can('payroll_structures.read')
                            <div class="col-md-3 d-flex">
                                <div class="card flex-fill">
                                    <div class="card-body">
                                        <span class="avatar rounded-circle bg-success mb-2">
                                            <i class="ti ti-currency-dollar-singapore fs-16"></i>
                                        </span>
                                        <h6 class="fs-13 fw-medium text-default mb-1">Active Pay Structure</h6>
                                        <h3 class="mb-3">{{ $dataCount['payrollStructure'][0] }}</h3>
                                        <a href="{{ route('payroll.structures') }}" class="link-default">View All</a>
                                    </div>
                                </div>
                            </div>
                        @endcan

                        @can('tax_structure.read')
                            <div class="col-md-3 d-flex">
                                <div class="card flex-fill">
                                    <div class="card-body">
                                        <span class="avatar rounded-circle bg-dark mb-2">
                                            <i class="ti ti-tax fs-16"></i>
                                        </span>
                                        <h6 class="fs-13 fw-medium text-default mb-1">Active Tax Structures</h6>
                                        <h3 class="mb-3">{{ $dataCount['taxStructures'][0] }}</h3>
                                        <a href="{{ route('payroll.taxStructures') }}" class="link-default">View All</a>
                                    </div>
                                </div>
                            </div>
                        @endcan
                    </div>
                </div>
                <!-- /Widget Info -->
                <!-- Employees By Department -->
                <div class="col-xxl-4 d-flex">
                    <div class="card flex-fill">
                        <div class="card-header pb-2 d-flex align-items-center justify-content-between flex-wrap">
                            <h5 class="mb-2">Employees By
                                <a href="javascript:void(0);" class="btn btn-white border btn-sm d-inline-flex align-items-center" data-bs-toggle="dropdown" id="main-dropdown-button">
                                    Departments
                                </a>
                                <ul class="dropdown-menu  dropdown-menu-end p-3">
                                    <li><a href="javascript:void(0);" class="dropdown-item rounded-1 model" data-model-name="departments" data-text="Departments">Departments</a></li>
                                    <li><a href="javascript:void(0);" class="dropdown-item rounded-1 model" data-model-name="designations" data-text="Designations">Designations</a></li>
                                    <li><a href="javascript:void(0);" class="dropdown-item rounded-1 model" data-model-name="employeeTypes" data-text="Employment Types">Employment Types</a></li>
                                    <li><a href="javascript:void(0);" class="dropdown-item rounded-1 model" data-model-name="jobLevels" data-text="Job Levels">Job Levels</a></li>
                                    <li><a href="javascript:void(0);" class="dropdown-item rounded-1 model" data-model-name="officeLocations" data-text="Office Locations">Office Locations</a></li>
                                    <li><a href="javascript:void(0);" class="dropdown-item rounded-1 model" data-model-name="qualificationLevels" data-text="Qualifications">Qualifications</a></li>
                                </ul>
                            </h5>
                            <div class="dropdown mb-2">

                            </div>
                        </div>
                        <div class="card-body">
                            <div id="emp-department"></div>

                        </div>
                    </div>
                </div>
                <!-- /Employees By Department -->

                {{-- Employee Birthdays --}}
                <div class="col-xxl-4 col-xl-6 d-flex">
                    <div class="card flex-fill">
                        <div class="card-header pb-2 d-flex align-items-center justify-content-between flex-wrap">
                            <h5 class="mb-2">Birthdays</h5>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-nowrap mb-0">
                                    <thead>
                                        @if (!empty($birthdays))
                                            <tr>
                                                <th>Name</th>
                                                <th>Department</th>
                                                <th>Birthday</th>
                                            </tr>
                                        @endif
                                    </thead>
                                    <tbody>

                                        @forelse($birthdays as $birthday)
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <a href="javascript:void(0);" class="avatar">
                                                            @if ($birthday['profile_image'])
                                                                <img src="data:image/png;base64,{{ $birthday['profile_image'] }}"
                                                                    class="img-fluid rounded-circle object-fit-cover"
                                                                    alt="img">
                                                            @else
                                                                <img src="https://ui-avatars.com/api/?name={{ $birthday['name'] }}&color=7F9CF5&background=D9D9D9&color=fff&bold=true"
                                                                class="img-fluid rounded-circle object-fit-cover"
                                                                alt="img">
                                                            @endif
                                                        </a>
                                                        <div class="ms-2">
                                                            <h6 class="fw-medium truncate-text max-width-160px d-block" title="{{ $birthday['name'] }}">
                                                                <a href="javascript:void(0);">{{ $birthday['name'] }}</a>
                                                            </h6>
                                                            <span
                                                                class="fs-12">{{ $birthday['designation'] ?? '' }}</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge badge-secondary-transparent badge-xs">
                                                        {{ $birthday['department'] ?? '' }}
                                                    </span>
                                                </td>
                                                <td>
                                                    <h6>{{ $birthday['birthday'] }}</h6>
                                                </td>
                                            </tr>
                                        @empty
                                            <div class="card-body pb-1 d-flex align-items-center justify-content-center"
                                                style="min-height: 300px;">
                                                <div class="text-center">
                                                    <i class="ti ti-license-off" style="font-size: 48px; opacity: 0.3;"></i>
                                                    <p class="text-muted mt-2 mb-0" style="font-weight: bolder;opacity: 0.3;">No Record Found!</p>
                                                </div>

                                            </div>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- End Here --}}

                {{-- Employee Oldest by Department --}}
                <div class="col-xxl-4 col-xl-6 d-flex">
                    <div class="card flex-fill">
                        <div class="card-header pb-2 d-flex align-items-center justify-content-between flex-wrap">
                            <h5 class="mb-2">Employees</h5>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-nowrap mb-0">
                                    <thead>
                                        @if (!empty($employees))
                                            <tr>
                                                <th>Name</th>
                                                <th>Department</th>
                                            </tr>
                                        @endif
                                    </thead>
                                    <tbody>

                                        @forelse($employees as $employee)
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <a href="javascript:void(0);" class="avatar">
                                                            @if ($employee['profile_image'])
                                                                <img src="data:image/png;base64,{{ $employee['profile_image'] }}"
                                                                    class="img-fluid rounded-circle object-fit-cover"
                                                                    alt="img">
                                                            @else
                                                                <img src="https://ui-avatars.com/api/?name={{ $employee['name'] }}&color=7F9CF5&background=D9D9D9&color=fff&bold=true"
                                                                class="img-fluid rounded-circle object-fit-cover"
                                                                alt="img">
                                                            @endif
                                                        </a>
                                                        <div class="ms-2">
                                                            <h6 class="fw-medium"><a
                                                                    href="javascript:void(0);">{{ $employee['name'] }}</a>
                                                            </h6>
                                                            <span
                                                                class="fs-12">{{ $employee['designation']['name'] ?? '' }}</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge badge-secondary-transparent badge-xs">
                                                        {{ $employee['department']['name'] ?? '' }}
                                                    </span>
                                                </td>
                                            </tr>
                                        @empty
                                            <div class="card-body pb-1 d-flex align-items-center justify-content-center"
                                                style="min-height: 300px;">
                                                <div class="text-center">
                                                    <i class="ti ti-license-off" style="font-size: 48px; opacity: 0.3;"></i>
                                                    <p class="text-muted mt-2 mb-0" style="font-weight: bolder;opacity: 0.3;">No Record Found!</p>
                                                </div>

                                            </div>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- End Here --}}

                {{-- Employee Work Anyversry --}}
                <div class="col-xxl-4 col-xl-6 d-flex">
                    <div class="card flex-fill">
                        <div class="card-header pb-2 d-flex align-items-center justify-content-between flex-wrap">
                            <h5 class="mb-2">Work Anniversary</h5>
                        </div>
                        <div class="card-body pb-1">
                            @forelse ($workAnniversary as $anniversary)
                                <h6 class="mb-2">{{ $anniversary['next_anniversary'] }}</h6>
                                <div class="bg-light p-2 border border-dashed rounded-top mb-3">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="d-flex align-items-center">
                                            <a href="javascript:void(0);" class="avatar">
                                                @if ($anniversary['profile_image'])
                                                    <img src="data:image/png;base64,{{ $anniversary['profile_image'] }}"
                                                        class="img-fluid rounded-circle object-fit-cover"
                                                        alt="img">
                                                @else
                                                    <img src="https://ui-avatars.com/api/?name={{ $anniversary['name'] }}&color=7F9CF5&background=D9D9D9&color=fff&bold=true" class="img-fluid rounded-circle object-fit-cover" alt="img">
                                                @endif
                                            </a>
                                            <div class="ms-2 overflow-hidden">
                                                <h6 class="fs-medium">{{ $anniversary['name'] }}</h6>
                                                <p class="fs-13">{{ $anniversary['designation_name'] }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="card-body pb-1 d-flex align-items-center justify-content-center"
                                    style="min-height: 300px;">
                                    <div class="text-center">
                                        <i class="ti ti-license-off" style="font-size: 48px; opacity: 0.3;"></i>
                                        <p class="text-muted mt-2 mb-0" style="font-weight: bolder;opacity: 0.3;">No Record Found!</p>
                                    </div>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
                {{-- End Here --}}
            </div>
        @endcan

    </div>
    {{-- @endcan --}}

@endsection

@push('scripts')
    @can('dashboard.read')
        <script>
            var departmentStats = @json($graphData)
        </script>
        <script src="{{ asset('assets/js/dev-script/dashboard.js') }}"></script>
    @endcan
@endpush