@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-circle-up"></i>
                                </div>
                                KPI Department
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <div class="container-xl mt-n10 px-4">
            <div class="card mb-4">
                <div class="card-header">
                    KPI Department
                </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_department_modal">
                        <i class="fas fa-plus fa-fw"></i>
                    </button>
                    <div class="container">
                        @include('partials.alert')

                        <div class="mb-3 row">
                            <div class="col-sm-2">
                                <p class="fw-600">Department</p>
                            </div>
                            <div class="col-sm-10">
                                <p class="fw-600">: {{ $department->name }}</p>
                            </div>
                            <div class="col-sm-2">
                                <p class="fw-600">Periode</p>
                            </div>
                            <div class="col-sm-10">
                                <p class="fw-600">: {{ $kdp->periode }} </p>
                            </div>
                            <div class="col-sm-2">
                                <p class="fw-600">Total Bobot</p>
                            </div>
                            <div class="col-sm-10">
                                <p class="fw-600">: {{ $kdp->total_bobot }} %</p>
                            </div>
                            <div class="col-sm-2">
                                <p class="fw-600">Total Score</p>
                            </div>
                            <div class="col-sm-10">
                                <p class="fw-600">: {{ $kdp->total_score }}</p>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <table class="table table-striped table-sm">
                                <thead>
                                    <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">Bobot %</th>
                                        <th scope="col">Score</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if ($KpiDepartmentPeriode == null)
                                        <tr>
                                            <td colspan="6">Belum Ada Data</td>
                                        </tr>
                                    @else
                                        @foreach ($KpiDepartmentPeriode as $item)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>{{ $item['name_kpi'] }}</td>
                                                <td>{{ $item['variable'] }}</td>
                                                @if ($item['target_name'] == null)
                                                    @if ($item['variable'] === 'percent')
                                                        <td>{{ $item['target'] }} %</td>
                                                    @else
                                                        <td>{{ $item['target'] }}</td>
                                                    @endif
                                                @else
                                                    <td> {{ ucfirst($item['target_name']) }} / {{ $item['target'] }}</td>
                                                @endif
                                                <td>{{ $item['bobot'] }} %</td>
                                                <td>{{ $item['score'] }}</td>
                                            </tr>
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    @include('KpiDepartmentPeriode.modals_kpi_department.add_kpi_department_modal')

    {{-- <script>
        const KpiDepartmentPeriode = {!! '"' . $KpiDepartmentPeriode . '"' !!};
    </script> --}}

    <script src="/js/kpi_department_periode/kpi_department/_init.js"></script>
    <script src="/js/kpi_department_periode/kpi_department/dt.js"></script>
@endsection