@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"> <i class="fa-solid fa-users-between-lines"></i></div>
                                KPI Individu {{ $user['name'] }}
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- Main page content-->
        <div class="container-fluid 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">
                            @if (auth()->user()->roles->accessLevel->name === 'HR-Manager' ||
                                    auth()->user()->roles->accessLevel->name === 'Manager' ||
                                    auth()->user()->roles->accessLevel->name === 'Supervisor' ||
                                    auth()->user()->roles->accessLevel->name === 'HR-Legal-Staff')
                                <button type="button" class="btn fw-bolder" id="button_back"><i
                                        class="fa-solid fa-arrow-left me-2"></i>
                                    Back</button>
                            @endif
                        </div>
                        <div class="ms-auto col-auto">
                            <div class="dropdown no-caret">
                                <button class="btn btn-transparent-dark btn-icon dropdown-toggle" id="dropdownMenuButton"
                                    type="button" data-bs-toggle="dropdown">
                                    <i class="fas fa-ellipsis-vertical fa-fw"></i>
                                </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" data-bs-toggle="modal"
                                                data-bs-target="#download_stocks_report_modal">
                                                <div class="dropdown-item-icon">
                                                    <i class="far fa-file-excel fa-fw"></i>
                                                </div>
                                                Export to Excel
                                            </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>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="container-fluid">
                        @include('partials.alert')

                        <div class="col-lg-12 d-flex gap-3">
                            <button class="btn btn-outline-blue" type="button" data-bs-toggle="modal"
                                data-bs-target="#add_new_kpi_mandiri_subject_modal"><i
                                    class="fa-solid fa-circle-plus fa-fw me-2"></i>Add Subject</button>
                            <button class="btn btn-outline-cyan" type="button" data-bs-toggle="modal"
                                data-bs-target="#insert_kpi_mandiri_children_subject_modal"><i
                                    class="fa-solid fa-circle-plus fa-fw me-2"></i>Add Children Subject</button>

                            @if (auth()->user()->roles->accessLevel->name === 'HR-Manager' ||
                                    auth()->user()->roles->accessLevel->name === 'Director' ||
                                    auth()->user()->roles->accessLevel->name === 'Direktur' ||
                                    auth()->user()->roles->accessLevel->name === 'Manager' ||
                                    auth()->user()->roles->accessLevel->name === 'Supervisor')
                                <button class="btn btn-outline-warning" type="button"
                                    onclick="calculateKpi('{{ $uid }}','{{ $yearPeriods }}')"><i
                                        class="fa-solid fa-bolt fa-fw me-2"></i>Calculate</button>
                            @endif
                        </div>

                        <div class="row mt-5">
                            <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 class="mb-2 d-flex">
                                    <span class="d-inline-block fw-bolder"
                                        style="width: 150px; font-size: 0.9rem">Periode</span>
                                    <span class="">:</span>
                                    <select class="form-select form-select-sm ms-2" style="width: 40%;" name="select_period"
                                        id="select_period">
                                        <option value="">Select period</option>
                                        @foreach ($yearPeriods as $year)
                                            <option value="{{ $year }}">{{ $year }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="mb-2 d-flex">
                                    <span class="d-inline-block fw-bolder"
                                        style="width: 150px; font-size: 0.9rem">Semester</span>
                                    <span class="">:</span>
                                    <select class="form-select form-select-sm ms-2" style="width: 40%;"
                                        name="select_semester" id="select_semester">
                                        <option value="" selected>Select semester</option>
                                        <option value="1">Semester 1</option>
                                        <option value="2">Semester 2</option>
                                    </select>
                                </div>

                                <div class="mb-2">
                                    <span class="d-inline-block fw-bolder" style="width: 150px; font-size: 0.9rem">Total
                                        Score</span>
                                    <span class="">:</span>
                                    <span class="fw-bolder" style="font-size: 0.9rem" id="total_score"></span>
                                </div>

                                <div class="mb-2">
                                    <span class="d-inline-block fw-bolder"
                                        style="width: 150px; font-size: 0.9rem">Kesimpulan</span>
                                    <span class="">:</span>
                                    <span class="fw-bolder" style="font-size: 0.9rem" id="conclusion"></span>
                                </div>


                                <div class="row mt-5">
                                    <h6 class="fw-bolder mb-3">List KPI </h6>

                                    <div style="max-height: 500px; overflow-y: auto;">
                                        <table id="table_kpi_detail" class="table small" width="100%">
                                            <thead class="fixed-header">
                                                <tr style="vertical-align: middle;">

                                                    <th scope="col" class="text-nowrap fixed-row-column""
                                                        style="min-width: 300px">
                                                        Subject
                                                    </th>
                                                    <th scope="col" class="text-nowrap" style="min-width: 400px">
                                                        Rincian
                                                    </th>
                                                    <th scope="col" class="text-nowrap" style="min-width: 300px">
                                                        Indikator
                                                    </th>
                                                    <th scope="col" class="text-nowrap" style="min-width: 300px">Due
                                                        Date
                                                    </th>
                                                    <th scope="col" class="text-nowrap"
                                                        style="min-width: 450px; white-space: normal; overflow-wrap: break-word; word-break: break-word;">
                                                        Aktual
                                                    </th>
                                                    <th scope="col" class="text-nowrap" style="min-width: 150px">Bobot
                                                        (%)
                                                    </th>
                                                    <th scope="col" class="text-nowrap" style="min-width: 150px">
                                                        Target
                                                        (%)</th>
                                                    <th scope="col" class="text-nowrap" style="min-width: 150px">
                                                        Realisasi
                                                        Score</th>
                                                    <th scope="col" class="text-nowrap" style="min-width: 150px">Score
                                                    </th>
                                                    <th scope="col" class="text-nowrap">Final Score</th>
                                                    <th scope="col" class="text-nowrap" style="min-width: 350px">
                                                        Catatan
                                                    </th>
                                                    <th scope="col" class="text-nowrap" style="min-width: 180px">
                                                        Action
                                                    </th>
                                                </tr>
                                            </thead>

                                            <tbody id="bodyRowTable">
                                                <tr>
                                                    <td class="fixed-first-row-header text-center">
                                                        <div class="d-flex align-items-center" style="gap: 8px;">
                                                            <div class="spinner-border text-primary" role="status"
                                                                style="width: 1.5rem; height: 1.5rem;">
                                                                <span class="visually-hidden">Loading...</span>
                                                            </div>
                                                            <span class="text-muted">Loading...</span>
                                                        </div>
                                                    </td>

                                                    <td colspan="12" class="fixed-row-header"></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </main>

    @include('kpi.IMI.kpi_master.modals.add.add_new_kpi_mandiri_actual')
    @include('kpi.IMI.kpi_master.modals.add.add_new_kpi_mandiri_subject')
    @include('kpi.IMI.kpi_master.modals.insert.add_kpi_mandiri_children_subject')
    @include('kpi.IMI.kpi_master.modals.add.add_new_kpi_mandiri_score')
    @include('kpi.IMI.kpi_master.modals.add.add_new_kpi_mandiri_realization_score')
    @include('kpi.IMI.kpi_master.modals.add.add_new_kpi_mandiri_notes')
    @include('kpi.IMI.kpi_master.modals.calculate.calculate_modal')
    @include('kpi.IMI.kpi_master.modals.edit.edit_new_kpi_modal')
    @include('kpi.IMI.kpi_master.modals.edit.edit_actual_modal')
    @include('kpi.IMI.kpi_master.modals.edit.edit_score_modal')
    @include('kpi.IMI.kpi_master.modals.edit.edit_realisasi_modal')
    @include('kpi.IMI.kpi_master.modals.edit.edit_notes_modal')
    @include('kpi.IMI.kpi_master.modals.delete.delete_children_subject_modal')

    @push('scripts')
        <script>
            const urlParams = {!! json_encode($uid) !!};
            const auth = {!! json_encode($auth) !!};
            const authLogin = {!! json_encode($authLogin) !!};
        </script>
        <script
            src="{{ asset('js/kpi/imi/master/insert/get_data_parent.js') }}?v={{ filemtime(public_path('js/kpi/imi/master/insert/get_data_parent.js')) }}">
        </script>
        <script src="{{ asset('js/kpi/imi/master/view.js') }}?v={{ filemtime(public_path('js/kpi/imi/master/view.js')) }}">
        </script>
        <script src="{{ asset('js/kpi/imi/master/edit.js') }}?v={{ filemtime(public_path('js/kpi/imi/master/edit.js')) }}">
        </script>
        <script
            src="{{ asset('js/kpi/imi/master/actual/edit.js') }}?v={{ filemtime(public_path('js/kpi/imi/master/actual/edit.js')) }}">
        </script>
        <script
            src="{{ asset('js/kpi/imi/master/notes/quiljs.js') }}?v={{ filemtime(public_path('js/kpi/imi/master/notes/quiljs.js')) }}">
        </script>
        <script
            src="{{ asset('js/kpi/imi/master/actual/add.js') }}?v={{ filemtime(public_path('js/kpi/imi/master/actual/add.js')) }}">
        </script>
        <script
            src="{{ asset('js/kpi/imi/master/score/addScore.js') }}?v={{ filemtime(public_path('js/kpi/imi/master/score/addScore.js')) }}">
        </script>
        <script
            src="{{ asset('js/kpi/imi/master/score/editScore.js') }}?v={{ filemtime(public_path('js/kpi/imi/master/score/editScore.js')) }}">
        </script>
        <script
            src="{{ asset('js/kpi/imi/master/notes/editNotes.js') }}?v={{ filemtime(public_path('js/kpi/imi/master/notes/editNotes.js')) }}">
        </script>
        <script
            src="{{ asset('js/kpi/imi/master/realization/editRealization.js') }}?v={{ filemtime(public_path('js/kpi/imi/master/realization/editRealization.js')) }}">
        </script>
        <script
            src="{{ asset('js/kpi/imi/master/realization/addRealization.js') }}?v={{ filemtime(public_path('js/kpi/imi/master/realization/addRealization.js')) }}">
        </script>
        <script
            src="{{ asset('js/kpi/imi/master/calculate.js') }}?v={{ filemtime(public_path('js/kpi/imi/master/calculate.js')) }}">
        </script>
        <script src="{{ asset('js/kpi/imi/master/notes.js') }}?v={{ filemtime(public_path('js/kpi/imi/master/notes.js')) }}">
        </script>
        <script
            src="{{ asset('js/kpi/imi/master/delete.js') }}?v={{ filemtime(public_path('js/kpi/imi/master/delete.js')) }}">
        </script>
    @endpush
@endsection