@extends('layouts.content')
@section('body_content')
    <main>
        <header class="page-header page-header-dark bg-gradient-primary-to-secondary pb-10">
            <div class="container-fluid 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 me-4">
                                    <i class="fas fa-handshake-simple fa-fw"></i>
                                </div>
                                Employee
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <div class="container-fluid mt-n10 px-4">
            <div class="card mb-4">
                <div class="card-header">
                    <div class="row">
                        <div class="me-auto col-auto my-auto fw-bolder">
                            Employee
                        </div>

                        <div class="ms-auto col-auto">
                            <button class="btn btn-warning btn-sm dropdown-toggle mx-2" id="dropdownMenuButton"
                                type="button" data-bs-toggle="dropdown">
                                <i class="fa-solid fa-download fa-fw me-2"></i>
                                <span style="font-size: 0.85rem">Download</span>
                            </button>

                            <div class="dropdown-menu dropdown-menu-end animated--fade-in-up">
                                <div class="row">
                                    <div class="col-12">
                                        <h6 class="dropdown-header">Export:</h6>

                                        <button type="button" class="dropdown-item py-3" data-bs-toggle="modal"
                                            data-bs-target="#export_employee_modal">
                                            <div class="dropdown-item-icon">
                                                <i class="fa-solid fa-cloud-arrow-down fa-fw me-2"></i><span
                                                    style="font-size: 0.85rem">Download All</span>
                                            </div>
                                        </button>

                                        <button type="button" class="dropdown-item py-3"
                                            onclick="downloadSelectedEmployee()">
                                            <div class="dropdown-item-icon">
                                                <i class="fa-regular fa-circle-check fa-fw me-2"></i><span
                                                    style="font-size: 0.85rem">Download Selected</span>
                                            </div>
                                        </button>

                                        <button type="button" class="dropdown-item py-3"
                                            onclick="downloadSelectedEmployee()">
                                            <div class="dropdown-item-icon">
                                                <i class="fa-regular fa-circle-check fa-fw me-2"></i><span
                                                    style="font-size: 0.85rem">Download Perdepartment</span>
                                            </div>
                                        </button>
                                    </div>

                                    <div class="col-12">
                                        <h6 class="dropdown-header mt-3">Filter Activity:</h6>
                                        <a class="dropdown-item" href="#!">
                                            <span class="badge bg-green-soft text-green my-1">Something</span>
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <button type="button" class="btn btn-primary btn-sm me-2" data-bs-toggle="modal"
                                data-bs-target="#upload_employee_modal">
                                <div class="dropdown-item-icon">
                                    <i class="fa fa-upload me-2"></i>Upload
                                </div>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <button
                        class="btn btn-success btn-xl btn-icon position-fixed end-0 me-5 lift floating-button bottom-0 mb-5"
                        type="button" onclick="addEmployee()">
                        <i class="fas fa-plus fa-fw"></i>
                    </button>
                    <div class="container-fluid">
                        @include('partials.alert')
                        <div class="col-lg-12">
                            <div id="alertWarning" class="alert alert-warning alert-icon" role="alert"
                                style="display: none">
                                <button class="btn-close" type="button" data-bs-dismiss="alert"
                                    aria-label="Close"></button>

                                <div class="alert-icon-aside">
                                    <i class="fa-solid fa-triangle-exclamation"></i>
                                </div>

                                <div class="alert-icon-content">
                                    <h6 id="alert-heading" class="alert-heading">cek</h6>
                                </div>
                            </div>
                        </div>

                        <table class="small" width="100%" id="employee_data_table"></table>
                    </div>
                </div>
            </div>
        </div>
    </main>

    @include('employee.modals.edit_employee_modal')
    @include('employee.modals.delete_employee_modal')
    @include('employee.modals.reset_password_employee_modal')
    @include('employee.modals.on_off_employee')
    @include('employee.modals.upload_excel_modal')
    @include('employee.modals.export_excel_modal')
    @include('employee.modals.export_selected_excel_modal')
    @include('employee.modals.extend_contract_employee')
    @include('employee.modals.alert_modal')

    @push('scripts')
        <script src="{{ assetTemp('js/functions/spinner.js') }}"></script>
        <script src="{{ assetTemp('js/employees/_init.js') }}"></script>
        <script src="{{ assetTemp('js/employees/dt.js') }}"></script>
        <script src="{{ assetTemp('js/employees/user/dt.js') }}"></script>
        <script src="{{ assetTemp('js/employees/edit.js') }}"></script>
        <script src="{{ assetTemp('js/employees/add.js') }}"></script>
        <script src="{{ assetTemp('js/employees/addUser.js') }}"></script>
        <script src="{{ assetTemp('js/employees/delete.js') }}"></script>
        <script src="{{ assetTemp('js/employees/ResetPassword.js') }}"></script>
        <script src="{{ assetTemp('js/employees/editProfile.js') }}"></script>
        <script src="{{ assetTemp('js/employees/details_employee.js') }}"></script>
        <script src="{{ assetTemp('js/employees/on_off_employee.js') }}"></script>
        <script src="{{ assetTemp('js/employees/report.js') }}"></script>
        <script src="{{ assetTemp('js/functions/departments.js') }}"></script>
        <script src="{{ assetTemp('js/functions/sub_department.js') }}"></script>
        <script src="{{ assetTemp('js/functions/divisions.js') }}"></script>
        <script src="{{ assetTemp('js/functions/locations.js') }}"></script>
        <script src="{{ assetTemp('js/functions/maritalstatuses.js') }}"></script>
        <script src="{{ assetTemp('js/functions/employeestatuses.js') }}"></script>
        <script src="{{ assetTemp('js/functions/roles.js') }}"></script>
        <script src="{{ assetTemp('js/functions/typePayroll.js') }}"></script>
        <script src="{{ assetTemp('js/functions/TypeAbsent.js') }}"></script>
        <script src="{{ assetTemp('js/functions/TemporaryUser.js') }}"></script>
        <script src="{{ assetTemp('js/functions/LocationAttendances.js') }}"></script>
        <script src="{{ assetTemp('js/employees/extend.js') }}"></script>
    @endpush
@endsection