@extends('layouts.content')

@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 fw-bolder">
                                <div class="page-header-icon"><i class="fa-solid fa-book-open-reader fa-fw"></i>
                                </div>
                                Detail List Job Descriptions
                            </h1>
                            <div class="page-header-subtitle">An overview of your team job duties is provided here.</div>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Main page content-->
        <div class="container-xl mt-n10 px-4">
            <div class="card mb-4">
                <div class="card-header py-2">
                    <div class="row">
                        <div class="me-auto col-auto my-auto fw-bolder">
                            <button type="button" class="btn btn-light" onclick="window.location.href='/jobs/list/team'"><i
                                    class="fa-solid fa-arrow-left me-2"></i>
                                Back</button>
                            Detail Job Description
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="container">
                        <div class="row ">
                            <div class="col-lg-12">
                                <div class="mb-2">
                                    <span class="d-inline-block fw-bolder"
                                        style="width: 150px; font-size: 0.9rem">Name</span>
                                    <span class="">:</span>
                                    <span class="fw-bolder" style="font-size: 0.9rem">{{ $user->name }}</span>
                                </div>

                                <div class="mb-2">
                                    <span class="d-inline-block fw-bolder"
                                        style="width: 150px; font-size: 0.9rem">Posisi</span>
                                    <span class="">:</span>
                                    <span class="fw-bolder" style="font-size: 0.9rem">
                                        @if ($user['roles']['name'])
                                            {{ $user['roles']['name'] }}
                                        @endif
                                    </span>
                                </div>

                                <div class="mb-2">
                                    <span class="d-inline-block fw-bolder"
                                        style="width: 150px; font-size: 0.9rem">Department</span>
                                    <span class="">:</span>
                                    <span class="fw-bolder" style="font-size: 0.9rem">
                                        @if ($user['department']['name'])
                                            {{ $user['department']['name'] }}
                                        @endif
                                    </span>

                                </div>
                            </div>
                        </div>

                        <table class="table small" width="100%" id="detail_team_job_description_list_data_table">
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </main>

    <script>
        const getUserUid = {!! json_encode($user->uid) !!}
    </script>
    <script src="/js/job_descriptions/_init.js"></script>
    <script src="/js/job_descriptions/supervisior/dt.js"></script>
    <script src="/js/job_descriptions/supervisior/detail/dt.js"></script>
@endsection