@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="fa-solid fa-house-user fa-fw"></i>
                                </div>
                                Employee Details
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <div class="container-fluid mt-n10 px-4">
            <div class="card mb-4">
                <div class="card-header border-bottom">
                    <!-- Dashboard card navigation-->
                    <a href="/user" class="btn btn-light"><i class="fa-solid fa-arrow-left fa-fw me-2"></i>Back</a>
                </div>

                <div class="card-body">

                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active text-black" id="employee-detail-tab" data-bs-toggle="tab"
                                data-bs-target="#employee-detail-tab-pane" type="button" role="tab"
                                aria-controls="employee-detail-tab-pane" aria-selected="true">Information
                                Detail</button>
                        </li>

                        <li class="nav-item" role="presentation">
                            <button class="nav-link text-black" id="employee-certificate-detail-tab" data-bs-toggle="tab"
                                data-bs-target="#employee-certificate-detail-tab-pane" type="button" role="tab"
                                aria-controls="employee-certificate-detail-tab-pane" aria-selected="true">Certificate
                                Information</button>
                        </li>

                        <li class="nav-item" role="presentation">
                            <button class="nav-link text-black" id="employee-history-status-detail-tab" data-bs-toggle="tab"
                                data-bs-target="#employee-history-status-detail-tab-pane" type="button" role="tab"
                                aria-controls="employee-history-status-detail-tab-pane" aria-selected="true">History Status
                                Employee</button>
                        </li>

                        <li class="nav-item" role="presentation">
                            <button class="nav-link text-black" id="employee-history-leave-tab" data-bs-toggle="tab"
                                data-bs-target="#employee_histroy_leave-tab-pane" type="button" role="tab"
                                aria-controls="employee_histroy_leave-tab-pane" aria-selected="true">History Leave</button>
                        </li>

                        <li class="nav-item" role="presentation">
                            <button class="nav-link text-black" id="employee_history_holiday_change_tab"
                                data-bs-toggle="tab" data-bs-target="#employee_history_holiday_change_tab_pane"
                                type="button" role="tab" aria-controls="employee_history_holiday_change_tab_pane"
                                aria-selected="true">History Holiday Change</button>
                        </li>

                        <li class="nav-item" role="presentation">
                            <button class="nav-link text-black" id="employee-change-password-tab" data-bs-toggle="tab"
                                data-bs-target="#employee-change-password-tab-pane" type="button" role="tab"
                                aria-controls="employee-change-password-tab-pane" aria-selected="true">Change
                                Password</button>
                        </li>
                    </ul>

                    <div class="tab-content" id="myTabContent">
                        @include('employee.tabs.employee_detail')
                        @include('employee.tabs.employee_certificate_detail')
                        @include('employee.tabs.employee_change_password')
                        @include('employee.tabs.employee_history_status_detail')
                        @include('employee.tabs.employe_history_leave')
                        @include('employee.tabs.employe_history_holiday_change')
                    </div>
                </div>
            </div>
        </div>
    </main>

    @include('employee.modals.edit_employee_user_modal')
    @include('employee.modals.edit_employee_family_modal')
    @include('employee.modals.extend_contract_employee')

    @push('scripts')
        <script>
            const users = {!! json_encode($user->temporarySalary, JSON_HEX_TAG) !!};
            const historyStatusEmployee = {!! json_encode($user->historyStatusEmployee, JSON_HEX_TAG) !!};
            const user = {!! json_encode($trainingInternal, JSON_HEX_TAG) !!};
            const userEksternal = {!! json_encode($trainingEksternal, JSON_HEX_TAG) !!};
            const dataUser = {!! json_encode(auth()->user()->uid, JSON_HEX_TAG) !!};
            const joinDate = {!! json_encode($user->join_date, JSON_HEX_TAG) !!};
            const userAge = {!! json_encode($user->birthday) !!};
            const url = {!! json_encode($url) !!};
        </script>

        <script src="{{ asset('js/functions/spinner.js') }}?v={{ filemtime(public_path('js/functions/spinner.js')) }}"></script>
        <script src="{{ asset('js/employees/_init.js') }}?v={{ filemtime(public_path('js/employees/_init.js')) }}"></script>
        <script src="{{ asset('js/employees/dt.js') }}?v={{ filemtime(public_path('js/employees/dt.js')) }}"></script>
        <script
            src="{{ asset('js/employees/details_employee.js') }}?v={{ filemtime(public_path('js/employees/details_employee.js')) }}">
        </script>
        <script src="{{ asset('js/employees/user/dt.js') }}?v={{ filemtime(public_path('js/employees/user/dt.js')) }}"></script>
        <script src="{{ asset('js/employees/edit.js') }}?v={{ filemtime(public_path('js/employees/edit.js')) }}"></script>
        <script src="{{ asset('js/employees/delete.js') }}?v={{ filemtime(public_path('js/employees/delete.js')) }}"></script>
        <script src="{{ asset('js/employees/show.js') }}?v={{ filemtime(public_path('js/employees/show.js')) }}"></script>
        <script
            src="{{ asset('js/functions/departments.js') }}?v={{ filemtime(public_path('js/functions/departments.js')) }}">
        </script>
        <script
            src="{{ asset('js/functions/sub_department.js') }}?v={{ filemtime(public_path('js/functions/sub_department.js')) }}">
        </script>
        <script src="{{ asset('js/functions/divisions.js') }}?v={{ filemtime(public_path('js/functions/divisions.js')) }}">
        </script>
        <script src="{{ asset('js/functions/locations.js') }}?v={{ filemtime(public_path('js/functions/locations.js')) }}">
        </script>
        <script
            src="{{ asset('js/functions/maritalstatuses.js') }}?v={{ filemtime(public_path('js/functions/maritalstatuses.js')) }}">
        </script>
        <script
            src="{{ asset('js/functions/employeestatuses.js') }}?v={{ filemtime(public_path('js/functions/employeestatuses.js')) }}">
        </script>
        <script src="{{ asset('js/functions/roles.js') }}?v={{ filemtime(public_path('js/functions/roles.js')) }}"></script>
        <script src="{{ asset('js/employees/extend.js') }}?v={{ filemtime(public_path('js/employees/extend.js')) }}"></script>
    @endpush
@endsection