@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">
                                <div class="page-header-icon"> <i class="fa-solid fa-users-viewfinder"></i></div>
                                KPI Division
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <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">
                            <a href="/kpi-division-new" class="btn btn-primary me-3 btn-sm">Back</a> List KPI Division
                        </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" data-bs-toggle="modal" data-bs-target="#add_kpi_divisi_modal">
                        <i class="fas fa-plus fa-fw"></i>
                    </button>
                    <div class="container">
                        @include('partials.alert')
                        <table class="mb-4" style="font-size: 0.85rem">
                            <tr class="fw-bolder mb-2">
                                <td width="150px">Division</td>
                                <td class="px-1">:</td>
                                <td> {{ $division->name }}</td>
                            </tr>
                            <tr class="fw-bolder mb-2">
                                <td width="150px">Periode</td>
                                <td class="px-1">:</td>
                                <td> {{ $periode->periode }}</td>
                            </tr>
                            <tr class="fw-bolder mb-2">
                                <td width="150px">Bulan</td>
                                <td class="px-1">:</td>
                                <td>
                                    <select id="periode_kpi_month" class="form-control selectpicker">
                                        <option value="">Select Month</option>
                                        <option value="resultSemester1">Result Semester 1</option>
                                        <option value="resultSemester2">Result Semester 2</option>
                                        <option value="resultYear">Result KPI</option>
                                        @foreach ($month as $item)
                                            <option
                                                value="{{ $item->uid }}"{{ $item->uid === $monthNow ? 'selected' : '' }}>
                                                {{ $item->name }}</option>
                                        @endforeach

                                    </select>
                                </td>
                            </tr>
                            <tr class="fw-bolder mb-2">
                                <td width="150px">Total Bobot</td>
                                <td class="px-1">:</td>
                                <td> {{ $totalBobot }}</td>
                            </tr>
                            <tr class="fw-bolder mb-2">
                                <td width="150px">Total Score</td>
                                <td class="px-1">:</td>
                                <td id="total_score"></td>
                            </tr>
                            <tr class="fw-bolder mb-2" id="kategori_nilai_division">
                            </tr>
                        </table>
                        <div class="mb-3 row overflow-auto">
                            <table class="table table-striped table-bordered ">
                                <thead class="text-center">
                                    <tr>
                                        <th scope="col">No</th>
                                        <th scope="col">Name KPI</th>
                                        <th scope="col">Variable</th>
                                        <th scope="col">Target</th>
                                        <th scope="col" style="width: 100px">Bobot %</th>
                                        <th scope="col" style="width: 100px">Score</th>
                                        @if(auth()->user()->roles->accessLevel->name === 'HR-Manager' || auth()->user()->roles->accessLevel->name === "Manager" || auth()->user()->roles->accessLevel->name === "Director")
                                        <th scope="col" style="width: 150px">Action</th>
                                        @endif
                                    </tr>
                                </thead>
                                <tbody id="valueKpiDivisi">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    @include('kpi_division_new.modals.add')
    @include('kpi_division_new.modals.delete')
    @include('kpi_division_new.modals.edit')

    <script>
        const periode = {!! json_encode($periode->uid) !!}
        const division = {!! json_encode($division->uid) !!}
        const authAccess = {!! json_encode($authAccess->name) !!}
    </script>

    <script src="/js/KpiDivisions/addModal.js"></script>
    <script src="/js/KpiDivisions/delete.js"></script>
    <script src="/js/KpiDivisions/edit.js"></script>
    <script src="/js/KpiDivisions/dtCustom.js"></script>
@endsection