@extends('layouts.content')

@push('custom-css')
    <link rel="stylesheet" href="/css/custom_pills.css" />
@endpush

@section('body_content')
    <main>
        <header class="page-header page-header-dark bg-gradient-primary-to-secondary pb-10">
            <div class="container-xl px-4">
                <div class="page-header-content  pt-4">
                    <div class="row align-items-center justify-content-between">
                        <div class="col-auto mt-4">
                            <h1 class="page-header-title">
                                <div class="page-header-icon"><i class="fa-solid fa-bars-progress fa-fw"></i></div>
                                Report Overview
                            </h1>
                            <div class="page-header-subtitle">An overview of your job duties is provided here.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Main page content-->
        <div class="container-xl mt-n10 px-4">
            <div class="row">
                <div class="col-xl-4 mb-4">
                    <a class="card lift h-100" href="/report-departments">
                        <div class="card-body d-flex justify-content-center flex-column">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="me-3">
                                    <span class="fw-bolder" style="font-size: 2rem;">{{ $countDepartment }}</span>
                                    <h5 class="fw-bolder">Department</h5>
                                    <div class="text-muted small">Total Department in the company</div>
                                </div>
                                <img src="assets/img/dashboard/icon_department.png" alt="..." style="width: 8rem" />
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-xl-4 mb-4">
                    <a class="card lift h-100" href="/report-manpower">
                        <div class="card-body d-flex justify-content-center flex-column">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="me-3">
                                    <span class="fw-bolder" style="font-size: 2rem;">{{ $countEmployee }}</span>
                                    <h5 class="fw-bolder">Employee</h5>
                                    <div class="text-muted small">Total employees in the company</div>
                                </div>
                                <img src="assets/img/dashboard/icon_manpower.png" alt="..." style="width: 8rem" />
                            </div>
                        </div>
                    </a>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    @if (auth()->user()->roles->accessLevel->name === 'Owner' ||
                            auth()->user()->roles->accessLevel->name === 'HR-Manager' ||
                            auth()->user()->roles->accessLevel->name === 'HR-Legal-Staff' ||
                            auth()->user()->roles->accessLevel->name === 'Developer' ||
                            auth()->user()->roles->accessLevel->name === 'Director' ||
                            auth()->user()->roles->accessLevel->name === 'Central-Finance')
                        <div class="card mb-4">
                            @include('dashboard.reports.employee_self_services.index')
                        </div>

                        {{-- <div class="card mb-4">
                            @include('dashboard.reports.report_anual_employee')
                        </div> --}}

                        {{-- <div class="card mb-4">
                            <div class="card-header border-bottom">
                                <div class="col text-center mb-3 mt-2">
                                    <h2 class="fs-6 fw-bolder text-uppercase">Report Employee Late & Overtime
                                    </h2>
                                </div>

                                <div class="d-flex justify-content-center">
                                    <div class="w-lg-25 w-sm-50">
                                        <div class="input-group input-group-joined border-5">
                                            <span class="input-group-text">
                                                <i class="text-primary" data-feather="calendar"></i>
                                            </span>
                                            <input class="form-control ps-2 pointer daterangepickerinput filter-report"
                                                placeholder="Select date range...">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card-body">
                                <div class="container">
                                    <table class="table small" id="reportEmployee_late_overtime_table" width="100%">
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="card mb-4">
                            <div class="card-header border-bottom">
                                <div class="col text-center mb-2 mt-2">
                                    <h2 class="fs-6 fw-bolder text-uppercase">Statistic HRIS</h2>
                                </div>

                                <div class="d-flex justify-content-center">
                                    <div class="w-lg-25 w-sm-50">
                                        <div class="input-group input-group-joined border-5">
                                            <span class="input-group-text">
                                                <i class="text-primary" data-feather="calendar"></i>
                                            </span>
                                            <input class="form-control ps-2 pointer daterangepickerinput filter-statistic"
                                                placeholder="Select date range...">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card-body">
                                <ul class="nav nav-tabs justify-content-center" id="myTab" role="tablist">
                                    <li class="nav-item text-center" role="presentation">
                                        <button class="nav-link active" id="outstation-application-tab" data-bs-toggle="tab"
                                            data-bs-target="#outstation-application-tab-pane" type="button" role="tab"
                                            aria-controls="outstation-application-tab-pane" aria-selected="true"
                                            style="font-size: 0.85rem; color: black;">Outstation
                                            Application</button>
                                    </li>

                                    <li class="nav-item text-center" role="presentation">
                                        <button class="nav-link" id="change-shift-tab" data-bs-toggle="tab"
                                            data-bs-target="#change-shift-tab-pane" type="button" role="tab"
                                            aria-controls="change-shift-tab-pane" aria-selected="false"
                                            style="font-size: 0.85rem; color: black;">Change
                                            Shift Application</button>
                                    </li>

                                    <li class="nav-item text-center" role="presentation">
                                        <button class="nav-link" id="leave-application-tab" data-bs-toggle="tab"
                                            data-bs-target="#leave-application-tab-pane" type="button" role="tab"
                                            aria-controls="leave-application-tab-pane" aria-selected="false"
                                            style="font-size: 0.85rem; color: black;">Leave
                                            Application</button>
                                    </li>


                                    <li class="nav-item text-center" role="presentation">
                                        <button class="nav-link" id="overtime-application-tab" data-bs-toggle="tab"
                                            data-bs-target="#overtime-application-tab-pane" type="button" role="tab"
                                            aria-controls="overtime-application-tab-pane" aria-selected="false"
                                            style="font-size: 0.85rem; color: black;">Overtime
                                            Application</button>
                                    </li>

                                    <li class="nav-item text-center" role="presentation">
                                        <button class="nav-link" id="sick-leave-application-tab" data-bs-toggle="tab"
                                            data-bs-target="#sick-leave-application-tab-pane" type="button"
                                            role="tab" aria-controls="sick-leave-application-tab-pane"
                                            aria-selected="false" style="font-size: 0.85rem; color: black;">Sick Leave
                                            Application</button>
                                    </li>
                                </ul>

                                <div class="tab-content" id="myTabContent">
                                    @include('dashboard.nav_pills.outstation_nav_pills')
                                    @include('dashboard.nav_pills.change_shift_nav_pills')
                                    @include('dashboard.nav_pills.leave_application_nav_pills')
                                    @include('dashboard.nav_pills.sick_leave_application_nav_pills')
                                    @include('dashboard.nav_pills.overtime_application_nav_pills')
                                </div>
                            </div>
                        </div> --}}
                    @endif
                </div>
            </div>
        </div>
    </main>

    @push('scripts')
        <script src="{{ assetTemp('/js/dashboard/_init.js') }}"></script>
        <script src="{{ assetTemp('/js/dashboard/statistic/_init.js') }}"></script>
        <script src="{{ assetTemp('/js/dashboard/statistic/table_using_rowspan.js') }}"></script>
        <script src="{{ assetTemp('/js/dashboard/statistic/table_without_rowspan.js') }}"></script>
        <script src="{{ assetTemp('/js/dashboard/statistic/fetch_data.js') }}"></script>
        <script src="{{ assetTemp('/js/dashboard/statistic/dt.js') }}"></script>
        <script src="{{ assetTemp('/js/dashboard/dtResultOvertimeLate.js') }}"></script>
        <script src="{{ assetTemp('/js/DaterangPicker/daterangepicker_callback.js') }}"></script>
        <script src="{{ assetTemp('/js/functions/convertTimeToGMT.js') }}"></script>
    @endpush
@endsection