@extends('layouts.template')
@section('content')
<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header border-0 pt-6">
                <div class="row">
                    <div class="card-title">Monthly Performance KPI</div>
                </div>
            </div>
            <div class="card-body pt-5">
                <div class="col-lg-12">
                    <div class="row">
                        <h6 class="text-primary">Search SDM</h6>
                        <div class="row">
                            <div class="col-lg-2 fv-row">
                                <select class="form-select form-select-solid" data-control="select2" data-placeholder="Region" data-allow-clear="true" id="selectRegionSdm1" name="region1sdm">
                                    <option value=""></option>
                                    @foreach($region as $r)
                                    <option value="{{$r->region_name}}">{{$r->region_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-2 fv-row">
                                <select class="form-select form-select-solid" data-control="select2" data-placeholder="Position" data-allow-clear="true" id="selectPositionSdm1" name="position1sdm">
                                </select>
                            </div>
                            <div class="col-lg-3 fv-row">
                                <select class="form-select form-select-solid" data-control="select2" data-placeholder="SDM 1" data-allow-clear="true" id="selectNameSdm1">
                                </select>
                            </div>
                            <div class="col-lg-2 fv-row">
                                <select class="form-select form-select-solid" data-control="select2" data-placeholder="Month" data-allow-clear="true" id="selectMonthSdm1">
                                    <option value="" selected>Select Month</option>
                                    @foreach($month as $b)
                                    <option value="{{$b->bulan}}" data-bulan="{{$b->periode}}">{{$b->periode}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-2 fv-row">
                                <select class="form-select form-select-solid" data-control="select2" data-placeholder="Year" data-allow-clear="true" id="selectYearSdm1">
                                    <option value="" selected>Select Year</option>
                                    @foreach($year as $y)
                                    <option value="{{$y->tahun}}">{{$y->tahun}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-1 fv-row">
                                <button class="btn btn-icon btn-primary" onclick="filterKpi1Sdm()">
                                    <i class="bi bi-search fs-4 me-2"></i>
                                </button>
                            </div>
                        </div>  
                    </div>
                </div>
            </div>
            <br>
            <div class="row showKpi1Sdm" style="display:none;">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-body pt-5">
                            <div class="row pt-2">
                                <div class="flex-equal me-5 tableShow">
                                    <table class="table table-flush fw-bold gy-1">
                                        <tr>
                                            <td class="text-muted min-w-125px w-125px">ID</td>
                                            <td class="text-gray-800" id="tdId1">-</td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted min-w-125px w-125px">Nama</td>
                                            <td class="text-gray-800" id="tdNama1">-</td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted min-w-125px w-125px">Position</td>
                                            <td class="text-gray-800" id="tdPosition1">-</td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted min-w-125px w-125px">Region</td>
                                            <td class="text-gray-800" id="tdRegion1">-</td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted min-w-125px w-125px">Distributor</td>
                                            <td class="text-gray-800" id="tdDistributor1">-</td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted min-w-125px w-125px">Territory</td>
                                            <td class="text-gray-800" id="tdTerritory1">-</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <div class="col-xl-12">
                                <div class="row pt-2">
                                    <div class="flex-equal me-5">
                                        <div class="fs-6 fw-bolder text-blue-600" id="cutOff1SDM">

                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <table id="tbKpi1Sdm" class="table table-row-bordered tableShow">
                                        <thead>
                                            <tr class="fw-bolder">
                                                <th rowspan="2" class="bg-info text-light border-end w-200px" style="display: none;">Param TYpe</th>
                                                <th rowspan="2" class="bg-info text-light border-end text-center">No</th>
                                                <th rowspan="2" class="bg-info text-light border-end w-200px" style="padding-right:190px;">Indikator</th>
                                                <th rowspan="2" class="bg-info text-light border-end text-center">Trend</th>
                                                <th rowspan="2" class="bg-info text-light border-end text-center">Freq</th>
                                                <th rowspan="2" class="bg-info text-light border-end text-center">% Bobot</th>
                                                <th rowspan="2" class="bg-info text-light border-end text-center">Nilai Maksimum</th>
                                                <th rowspan="2" class="bg-info text-light border-end text-center">Satuan</th>
                                                <th colspan="4" id="thMonth1Id" class="bg-primary text-light border-end text-center">Month 1</th>
                                            </tr>
                                            <tr>
                                                <th class="bg-primary text-light border-end text-center">Target</th>
                                                <th class="bg-primary text-light border-end text-center">Realisasi</th>
                                                <th class="bg-primary text-light border-end text-center">Performance</th>
                                                <th class="bg-primary text-light border-end text-center">Weighted</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                        <tfoot style="font-size: 13px; font-weight: bold;" class="text-dark">
                                            <tr>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td></td>
                                                <td>Main KPI</td>
                                                <td></td>
                                                <td></td>
                                                <td class="text-center" id="totalBobot">bobot</td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td class="text-end" id="mainKpi">kpi</td>
                                            </tr>
                                            <tr class="text-primary">
                                                <td></td>
                                                <td>Compliance</td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td class="text-end" id="boundary">boundary</td>
                                            </tr>
                                            <tr class="text-primary">
                                                <td></td>
                                                <td>Workload & Overall</td>
                                                <td></td>
                                                <td></td>
                                                <td class="text-center" id="workload">workload</td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td class="text-end" id="overall">overall</td>
                                            </tr>
                                            <tr class="text-info">
                                                <td></td>
                                                <td>Total KPI</td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td class="text-end" id="totalKpi">total kpi</td>
                                            </tr>
                                            <tr class="text-info">
                                                <td></td>
                                                <td>Grade</td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td class="text-end" id="grade">grade</td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<br>
<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header border-0 pt-6">
                <div class="row">
                    <div class="card-title">Compare KPI</div>
                </div>
            </div>
            <div class="card-body pt-5">
                <div class="col-lg-12">
                    <div class="col-lg-6">
                        <div class="row">
                            <label class="d-flex flex-stack mb-5 cursor-pointer">
                                <span class="d-flex align-items-center me-2">
                                    <span class="symbol symbol-50px me-6">
                                        <span class="symbol-label bg-light-primary">
                                            <span class="svg-icon svg-icon-1 svg-icon-primary">
                                                <i class="bi bi-people-fill fs-2x"></i>
                                            </span>
                                        </span>
                                    </span>
                                    <span class="d-flex flex-column">
                                        <span class="fw-bolder fs-6">Compare KPI 2 SDM</span>
                                    </span>
                                </span>
                                <span class="form-check form-check-custom form-check-solid">
                                    <input class="form-check-input" type="radio"  name="compareCheck" value="1" checked/>
                                </span>
                            </label>
                            <label class="d-flex flex-stack mb-5 cursor-pointer">
                                <span class="d-flex align-items-center me-2">
                                    <span class="symbol symbol-50px me-6">
                                        <span class="symbol-label bg-light-danger">
                                            <span class="svg-icon svg-icon-1 svg-icon-danger">
                                                <i class="bi bi-people-fill fs-2x"></i>
                                                <i class="bi bi-person-fill"></i>
                                            </span>
                                        </span>
                                    </span>
                                    <span class="d-flex flex-column">
                                        <span class="fw-bolder fs-6">Compare KPI 3 SDM</span>
                                    </span>
                                </span>
                                <span class="form-check form-check-custom form-check-solid">
                                    <input class="form-check-input" type="radio" name="compareCheck" value="2"/>
                                </span>
                            </label>
                        </div>
                    </div>
                    <div class="col-lg-12 pt-3 class2Sdm compareCheck1">
                        <div class="row">
                            <h6 class="text-primary">Periode</h6>
                            <div class="col-lg-5 fv-row">
                                <select class="form-select form-select-solid" data-control="select2" data-placeholder="Month" id="selectMonthSdm2" data-allow-clear="true">
                                    <option value=""></option>
                                    @foreach($month as $m)
                                    <option value="{{$m->bulan}}">{{$m->periode}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-5 fv-row">
                                <select class="form-select form-select-solid" data-control="select2" data-placeholder="Year" data-allow-clear="true" id="selectYearSdm2">
                                    <option value=""></option>
                                    @foreach($year as $y)
                                    <option value="{{$y->tahun}}">{{$y->tahun}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>  
                    <div class="col-lg-12 pt-3 class2Sdm compareCheck1">
                        <h6 class="text-primary">Search SDM</h6>
                        <div class="row">
                            <div class="col-lg-2 fv-row">
                                <select class="form-select form-select-solid" data-control="select2" data-placeholder="Region" data-allow-clear="true" id="selectRegionSdm2">
                                    <option value=""></option>
                                    @foreach($region as $r)
                                    <option value="{{$r->region_name}}">{{$r->region_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-2 fv-row">
                                <select class="form-select form-select-solid" data-control="select2" data-placeholder="Position" data-allow-clear="true" id="selectPositionSdm2">
                                </select>
                            </div>
                            <div class="col-lg-3 fv-row">
                                <select class="form-select form-select-solid" data-control="select2" data-placeholder="SDM 1" data-allow-clear="true" id="select1NameSdm2">
                                </select>
                            </div>
                            <div class="col-lg-3 fv-row">
                                <select class="form-select form-select-solid" data-control="select2" data-placeholder="SDM 2" data-allow-clear="true" id="select2NameSdm2">
                                </select>
                            </div>
                            <div class="col-lg-1 fv-row">
                                <button class="btn btn-icon btn-primary" onclick="filterKpi2Sdm()">
                                    <i class="bi bi-search fs-4 me-2"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 pt-3 class3Sdm compareCheck2" style="display:none;">
                        <div class="row">
                            <h6 class="text-primary">Periode</h6>
                            <div class="col-lg-5 fv-row">
                                <select class="form-select form-select-solid" data-control="select2" data-placeholder="Month" id="selectMonthSdm3" data-allow-clear="true">
                                    <option value=""></option>
                                    @foreach($month as $m)
                                    <option value="{{$m->bulan}}">{{$m->periode}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-5 fv-row">
                                <select class="form-select form-select-solid" data-control="select2" data-placeholder="Year" data-allow-clear="true" id="selectYearSdm3">
                                    <option value=""></option>
                                    @foreach($year as $y)
                                    <option value="{{$y->tahun}}">{{$y->tahun}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>  
                    <div class="col-lg-12 pt-3 class3Sdm compareCheck2" style="display:none;">
                        <h6 class="text-primary">Search SDM</h6>
                        <div class="row">
                            <div class="col-lg-2 fv-row">
                                <select class="form-select form-select-solid" data-control="select2" data-placeholder="Region" data-allow-clear="true" id="selectRegionSdm3">
                                    <option value=""></option>
                                    @foreach($region as $r)
                                    <option value="{{$r->region_name}}">{{$r->region_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-2 fv-row">
                                <select class="form-select form-select-solid" data-control="select2" data-placeholder="Position" data-allow-clear="true" id="selectPositionSdm3">
                                </select>
                            </div>
                            <div class="col-lg-2 fv-row">
                                <select class="form-select form-select-solid" data-control="select2" data-placeholder="SDM 1" data-allow-clear="true" id="select3NameSdm1">
                                </select>
                            </div>
                            <div class="col-lg-2 fv-row">
                                <select class="form-select form-select-solid" data-control="select2" data-placeholder="SDM 2" data-allow-clear="true" id="select3NameSdm2">
                                </select>
                            </div>
                            <div class="col-lg-2 fv-row">
                                <select class="form-select form-select-solid" data-control="select2" data-placeholder="SDM 3" data-allow-clear="true" id="select3NameSdm3">
                                </select>
                            </div>
                            <div class="col-lg-1 fv-row">
                                <button class="btn btn-icon btn-primary" onclick="filterKpi3Sdm()">
                                    <i class="bi bi-search fs-4 me-2"></i>
                                </button>
                            </div>
                        </div>
                    </div>        
                </div>
            </div>
        </div>
    </div>
</div>
<br>
<div class="row class2Sdm compareCheck1"> 
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header border-0 pt-6">
                <div class="row">
                    <div class="card-title">Compare KPI 2 SDM</div>
                </div>
            </div>
            <div class="card-body pt-5">
                <div class="col-xl-12">
                    <div class="row pt-2">
                        <div class="flex-equal me-5">
                            <div class="fs-7 fw-bolder text-gray-700" id="cutOff2SDM">

                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <table id="tbKpi2Sdm" class="table table-row-bordered">
                            <thead>
                                <tr class="fw-bolder">
                                    <th rowspan="2" class="bg-info text-light border-end w-200px" style="display: none;">Param TYpe</th>
                                    <th rowspan="2" class="bg-info text-light border-end text-center">No</th>
                                    <th rowspan="2" class="bg-info text-light border-end w-200px" style="padding-right:220px;">Indikator</th>
                                    <th rowspan="2" class="bg-info text-light border-end text-center">Freq</th>
                                    <th rowspan="2" class="bg-info text-light border-end text-center">% Bobot</th>
                                    <th rowspan="2" class="bg-info text-light border-end text-center">Nilai Maksimum</th>
                                    <th rowspan="2" class="bg-info text-light border-end text-center">Satuan</th>
                                    <th colspan="4" id="thName2SDM1" class="bg-primary text-light border-end text-center">SDM 1</th>
                                    <th colspan="4" id="thName2SDM2" class="bg-info text-light border-end text-center">SDM 2</th>
                                </tr>
                                <tr>
                                    <th class="bg-primary text-light border-end text-center">Target</th>
                                    <th class="bg-primary text-light border-end text-center">Realisasi</th>
                                    <th class="bg-primary text-light border-end text-center">Performance</th>
                                    <th class="bg-primary text-light border-end text-center">Weighted</th>
                                    <th class="bg-info text-light border-end text-center">Target</th>
                                    <th class="bg-info text-light border-end text-center">Realisasi</th>
                                    <th class="bg-info text-light border-end text-center">Performance</th>
                                    <th class="bg-info text-light border-end text-center">Weighted</th>

                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                            <tfoot style="font-size: 13px; font-weight: bold;" class="text-dark">
                                <tr>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td> 
                                    <td>Main KPI</td>
                                    <td></td>
                                    <td class="text-center" id="totalBobot2SDM"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="text-end" id="mainKpi2SDM1"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="text-end" id="mainKpi2SDM2"></td>
                                </tr>
                                <tr class="text-primary">
                                    <td></td>
                                    <td>Compliance</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="text-end" id="boundary2SDM1"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="text-end" id="boundary2SDM2"></td>
                                </tr>
                                <tr class="text-success">
                                    <td></td>
                                    <td>Workload & Overall</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="text-end" id="workload2SDM1"></td>
                                    <td class="text-end" id="overall2SDM1"></td>
                                    <td></td>
                                    <td></td>
                                    <td class="text-end" id="workload2SDM2"></td>
                                    <td class="text-end" id="overall2SDM2"></td>
                                </tr>
                                <tr class="text-info">
                                    <td></td>
                                    <td>Total KPI</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="text-end" id="totalKpi2SDM1"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="text-end" id="totalKpi2SDM2"></td>
                                </tr>
                                <tr class="text-info">
                                    <td></td>
                                    <td>Grade</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="text-end" id="grade2SDM1"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="text-end" id="grade2SDM2"></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<br>
<div class="row class3Sdm compareCheck2" style="display:none;">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header border-0 pt-6">
                <div class="row">
                    <div class="card-title">Compare KPI 3 SDM</div>
                </div>
            </div>
            <div class="card-body pt-5">
                <div class="col-xl-12">
                    <div class="row pt-2">
                        <div class="flex-equal me-5">
                            <div class="fs-7 fw-bolder text-gray-700" id="cutOff3SDM">

                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <table id="tbKpi3Sdm" class="table table-row-bordered">
                            <thead>
                                <tr class="fw-bolder">
                                    <th rowspan="2" class="bg-info text-light border-end w-200px" style="display: none;">Param TYpe</th>
                                    <th rowspan="2" class="bg-info text-light border-end text-center">No</th>
                                    <th rowspan="2" class="bg-info text-light border-end w-200px" style="padding-right:220px;">Indikator</th>
                                    <th rowspan="2" class="bg-info text-light border-end text-center">Freq</th>
                                    <th rowspan="2" class="bg-info text-light border-end text-center">% Bobot</th>
                                    <th rowspan="2" class="bg-info text-light border-end text-center">Nilai Maksimum</th>
                                    <th rowspan="2" class="bg-info text-light border-end text-center">Satuan</th>
                                    <th colspan="4" id="thName3SDM1" class="bg-primary text-light border-end text-center">SDM 1</th>
                                    <th colspan="4" id="thName3SDM2" class="bg-primary text-light border-end text-center">SDM 2</th>
                                    <th colspan="4" id="thName3SDM3" class="bg-primary text-light border-end text-center">SDM 3</th>
                                </tr>
                                <tr>
                                    <th class="bg-primary text-light border-end text-center">Target</th>
                                    <th class="bg-primary text-light border-end text-center">Realisasi</th>
                                    <th class="bg-primary text-light border-end text-center">Performance</th>
                                    <th class="bg-primary text-light border-end text-center">Weighted</th>
                                    <th class="bg-primary text-light border-end text-center">Target</th>
                                    <th class="bg-primary text-light border-end text-center">Realisasi</th>
                                    <th class="bg-primary text-light border-end text-center">Performance</th>
                                    <th class="bg-primary text-light border-end text-center">Weighted</th>
                                    <th class="bg-primary text-light border-end text-center">Target</th>
                                    <th class="bg-primary text-light border-end text-center">Realisasi</th>
                                    <th class="bg-primary text-light border-end text-center">Performance</th>
                                    <th class="bg-primary text-light border-end text-center">Weighted</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                            <tfoot style="font-size: 13px; font-weight: bold;" class="text-dark">
                                <tr>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td>Main KPI</td>
                                    <td></td>
                                    <td class="text-center" id="totalBobot3SDM"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="text-end" id="mainKpi3SDM1"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="text-end" id="mainKpi3SDM2"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="text-end" id="mainKpi3SDM3"></td>
                                </tr>
                                <tr class="text-primary">
                                    <td></td>
                                    <td>Compliance</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="text-end" id="boundary3SDM1"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="text-end" id="boundary3SDM2"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="text-end" id="boundary3SDM3"></td>
                                </tr>
                                 <tr class="text-success">
                                    <td></td>
                                    <td>Workload & Overall</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="text-end" id="workload3SDM1"></td>
                                    <td class="text-end" id="overall3SDM1"></td>
                                    <td></td>
                                    <td></td>
                                    <td class="text-end" id="workload3SDM2"></td>
                                    <td class="text-end" id="overall3SDM2"></td>
                                    <td></td>
                                    <td></td>
                                    <td class="text-end" id="workload3SDM3"></td>
                                    <td class="text-end" id="overall3SDM3"></td>
                                </tr>
                                <tr class="text-info">
                                    <td></td>
                                    <td>Total KPI</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="text-end" id="totalKpi3SDM1"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="text-end" id="totalKpi3SDM2"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="text-end" id="totalKpi3SDM3"></td>
                                </tr>
                                <tr class="text-info">
                                    <td></td>
                                    <td>Grade</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="text-end" id="grade3SDM1"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="text-end" id="grade3SDM2"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="text-end" id="grade3SDM3"></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="modalUploadFile" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content modal-content">
            <div class="modal-header">
                <h6 class="modal-title text-primary" id="titleIndikatorModal">Volume Sell Out - Maintain Backbone Product</h6>
                <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                </div>
            </div>
            <div class="row" style="margin:20px;">
                <div class="col-xl-12">
                    <canvas id="chartTrendIndikator" height="150px"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
<style type="text/css">
    .ds{
        display: none;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script type="text/javascript">

$(document).ready(function() {
    $('#tbKpi3Sdm').DataTable();
    $('#tbKpi2Sdm').DataTable();
});

$("input[name$='compareCheck']").click(function() {
    var cek = $(this).val();
    $(".class2Sdm").hide();
    $(".class3Sdm").hide();
    $(".compareCheck" + cek).show();
});

function filterKpi1Sdm(){
    kode_sdm    = $("#selectNameSdm1").val();
    nama_sdm    = $("#selectNameSdm1").select2().find(":selected").data("id");
    month       = $("#selectMonthSdm1").val();
    year        = $("#selectYearSdm1").val();
    position    = $("#selectPositionSdm1").val();

    $('.showKpi1Sdm').show();
    $("#tbKpi1Sdm").dataTable().fnDestroy();
    var table = $('#tbKpi1Sdm').DataTable({
        processing: true,
        serverSide: true,
        pageLength: 12,
        paging: false,
        "bInfo" : false,
        ajax: {
            url: "{{ route('detailkpi.getDataKpiSd') }}",
            type: "get",
            data: function (d) {
               d.kode_sdm = kode_sdm;
               d.nama_sdm = nama_sdm;
               d.month = month;
               d.year = year;
               d.position = position;
            }
        },
        columns: [
            { data: 'parameter_type', name: 'tes', className: 'border-end ds'},
            { data: 'DT_RowIndex', name: 'DT_RowIndex', className: "text-center border-end"},
            { data: 'parameter', name: 'parameter', className: 'border-end'},
            { data: 'trend', name: 'trend', className: 'border-end'},
            { data: 'freq', name: 'freq', className: 'border-end'},
            { data: 'bobot', name: 'bobot', className: "text-center border-end"},
            { data: 'nilai_maks', name: 'nilai_maks', className: "text-center border-end"},
            { data: 'satuan', name: 'satuan', className: "text-start border-end"},

            { data: 't1', name: 't1', className: "text-end border-end"},
            { data: 'r1', name: 'r1', className: "text-end border-end"},
            { data: 'p1', name: 'p1', className: "text-end border-end"},
            { data: 'w1', name: 'w1', className: "text-end"},
        ],
        createdRow: function ( row, data, index ) {
            if ( data['parameter_type'] == 2 ) {
                $('td', row).eq(1).addClass('text-primary');
                $('td', row).eq(2).addClass('text-primary');
                $('td', row).eq(3).addClass('text-primary');
                $('td', row).eq(4).addClass('text-primary');
                $('td', row).eq(5).addClass('text-primary');
                $('td', row).eq(6).addClass('text-primary');
                $('td', row).eq(7).addClass('text-primary');
                $('td', row).eq(8).addClass('text-primary');
                $('td', row).eq(9).addClass('text-primary');
                $('td', row).eq(10).addClass('text-primary');
            }
               
        },

        drawCallback:function(value)
        {
            $('#totalBobot').html(value.json.totalBobot + '%');
            $('#boundary').html(parseFloat(value.json.boundary).toFixed( 2 ) + '%');
            $('#mainKpi').html(parseFloat(value.json.kpi).toFixed( 2 ) + '%');
            $('#grade').html(value.json.grade);
           
            $('#workload').html(value.json.workload);


            if(value.json.totalKpi == "KPI NULL"){
                $('#totalKpi').html(value.json.totalKpi);
                $('#overall').html(value.json.overall);

            }else{
                $('#totalKpi').html(parseFloat(value.json.totalKpi).toFixed( 2 ) + '%');
                $('#overall').html(parseFloat(value.json.overall).toFixed( 2 ) + '%');
            }
        }

        });

        setDataSdm();
   
}

function setDataSdm()
{
    kode_sdm    = $("#selectNameSdm1").val();
    nama_sdm    = $("#selectNameSdm1").select2().find(":selected").data("id");
    month       = $("#selectMonthSdm1").val();
    year        = $("#selectYearSdm1").val();
    position    = $("#selectPositionSdm1").val();
    namaBulan   = $("#selectMonthSdm1 option:selected").attr('data-bulan');

    // console.log(year, month, position, namaBulan);

    $.ajax({
        url:"{{ route('detailkpi.getDataSdm') }}",
        method:"get",
        type:"json",
        data: {
          kode_sdm  : kode_sdm,
          nama_sdm : nama_sdm,
          position  : position,
          month     : month,
          year      : year

        },
        success:function (data) {
            // console.log(data);
            document.getElementById('tdNama1').innerHTML = data.datasdm.nama;
            document.getElementById('tdId1').innerHTML = data.datasdm.id_sales;
            document.getElementById('tdRegion1').innerHTML = data.datasdm.region;
            document.getElementById('tdDistributor1').innerHTML = data.datasdm.distributor;
            document.getElementById('tdTerritory1').innerHTML = data.datasdm.territory;
            document.getElementById('tdPosition1').innerHTML = data.datasdm.jabatan;
            document.getElementById('thMonth1Id').innerHTML = namaBulan + ' ' + year;
            document.getElementById('cutOff1SDM').innerHTML = "Data Cut Off :" + data.co.co +  ", " +"DO Cut Off : " +data.co.co_do;
            
        }
    });
}

function filterKpi2Sdm(){
    sdm1      = $("#select1NameSdm2").val();
    sdm2      = $("#select2NameSdm2").val();
    month     = $("#selectMonthSdm2").val();
    year      = $("#selectYearSdm2").val();
    jabatan   = $("#selectPositionSdm2").val();
    nama_sdm1 = $("#select1NameSdm2").select2().find(":selected").data("id");
    nama_sdm2 = $("#select2NameSdm2").select2().find(":selected").data("id");

    $('.showKpi2Sdm').show();
    $("#tbKpi2Sdm").dataTable().fnDestroy();
    var table = $('#tbKpi2Sdm').DataTable({
        processing: true,
        serverSide: true,
        pageLength: 12,
        paging: false,
        "bInfo" : false,
        ajax: {
            url: "{{ route('detailkpi.compareSdm') }}",
            type: "get",
            data: function (d) {
               d.month = month;
               d.year = year;
               d.sdm1 = sdm1;
               d.sdm2 = sdm2;
               d.jabatan = jabatan;
               d.nama_sdm1 = nama_sdm1;
               d.nama_sdm2 = nama_sdm2;

            }
        },
        columns: [
            { data: 'parameter_type', name: 'tes', className: 'border-end ds'},
            { data: 'DT_RowIndex', name: 'DT_RowIndex', className: "text-center border-end"},
            { data: 'parameter', name: 'parameter', className: 'border-end'},
            { data: 'freq', name: 'freq', className: 'border-end'},
            { data: 'bobot', name: 'bobot', className: "text-center border-end"},
            { data: 'nilai_maks', name: 'nilai_maks', className: "text-center border-end"},
            { data: 'satuan', name: 'satuan', className: "text-start border-end"},

            { data: 't1', name: 't1', className: "text-end border-end"},
            { data: 'r1', name: 'r1', className: "text-end border-end"},
            { data: 'p1', name: 'p1', className: "text-end border-end"},
            { data: 'w1', name: 'w1', className: "text-end border-end"},

            { data: 't2', name: 't2', className: "text-end border-end"},
            { data: 'r2', name: 'r2', className: "text-end border-end"},
            { data: 'p2', name: 'p2', className: "text-end border-end"},
            { data: 'w2', name: 'w2', className: "text-center"},

        ],

        createdRow: function ( row, data, index ) {
            if ( data['parameter_type'] == 2 ) {
                $('td', row).eq(1).addClass('text-primary');
                $('td', row).eq(2).addClass('text-primary');
                $('td', row).eq(3).addClass('text-primary');
                $('td', row).eq(4).addClass('text-primary');
                $('td', row).eq(5).addClass('text-primary');
                $('td', row).eq(6).addClass('text-primary');
                $('td', row).eq(7).addClass('text-primary');
                $('td', row).eq(8).addClass('text-primary');
                $('td', row).eq(9).addClass('text-primary');
                $('td', row).eq(10).addClass('text-primary');
                $('td', row).eq(11).addClass('text-primary');
                $('td', row).eq(12).addClass('text-primary');
            } 
        },

        drawCallback:function(value)
        {
            $('#totalBobot2SDM').html(value.json.totalBobot + '%');
            $('#boundary2SDM1').html(parseFloat(value.json.boundary1).toFixed( 2 ) + '%');
            $('#boundary2SDM2').html(parseFloat(value.json.boundary2).toFixed( 2 ) + '%');
            $('#mainKpi2SDM1').html(parseFloat(value.json.kpi1).toFixed( 2 ) + '%');
            $('#mainKpi2SDM2').html(parseFloat(value.json.kpi2).toFixed( 2 ) + '%');
           
            $('#grade2SDM1').html(value.json.grade1);
            $('#grade2SDM2').html(value.json.grade2);

            if(value.json.totalKpi1 == "KPI NULL"){
                $('#totalKpi2SDM1').html(value.json.totalKpi1);
                $('#overall2SDM1').html(value.json.totalKpi1);
                $('#workload2SDM1').html(value.json.workload1);
            }else{
                $('#totalKpi2SDM1').html(parseFloat(value.json.totalKpi1).toFixed( 2 ) + '%');
                $('#overall2SDM1').html(parseFloat(value.json.overall1).toFixed( 2 ) + '%');
                $('#workload2SDM1').html(value.json.workload1);
            }

            if(value.json.totalKpi2 == "KPI NULL"){
                $('#totalKpi2SDM2').html(value.json.totalKpi2);
                $('#overall2SDM2').html(value.json.totalKpi2);
                $('#workload2SDM2').html(value.json.workload2);
            }else{
                $('#totalKpi2SDM2').html(parseFloat(value.json.totalKpi2).toFixed( 2 ) + '%');
                $('#overall2SDM2').html(parseFloat(value.json.overall2).toFixed( 2 ) + '%');
                $('#workload2SDM2').html(value.json.workload2);
            }
        }

        });

        setTitleCompare2Sdm();
        setDataSdm2();
   
}

function setDataSdm2()
{
    month       = $("#selectMonthSdm2").val();
    year        = $("#selectYearSdm2").val();
    position    = $("#selectPositionSdm2").val();

    $.ajax({
        url:"{{ route('detailkpi.getDataSdm') }}",
        method:"get",
        type:"json",
        data: {
          position  : position,
          month     : month,
          year      : year

        },
        success:function (data) {
            console.log(data);
            document.getElementById('cutOff2SDM').innerHTML = "Data Cut Off :" + data.co.co +  ", " +"DO Cut Off : " +data.co.co_do;
        }
    });
}

function setTitleCompare2Sdm()
{
    var namaSdm1 = $("#select1NameSdm2 option:selected").attr('data-id');
    var namaSdm2 = $("#select2NameSdm2 option:selected").attr('data-id');
    document.getElementById('thName2SDM1').innerHTML = namaSdm1;
    document.getElementById('thName2SDM2').innerHTML = namaSdm2;
    
}

function filterKpi3Sdm(){
    sdm1 = $("#select3NameSdm1").val();
    sdm2 = $("#select3NameSdm2").val();
    sdm3 = $("#select3NameSdm3").val();

    nama_sdm1 = $("#select3NameSdm1 option:selected").attr('data-id');
    nama_sdm2 = $("#select3NameSdm2 option:selected").attr('data-id');
    nama_sdm3 = $("#select3NameSdm3 option:selected").attr('data-id');

    month = $("#selectMonthSdm3").val();
    year = $("#selectYearSdm3").val();
    jabatan = $("#selectPositionSdm3").val();

    console.log(sdm1, sdm2, sdm3, month, year, jabatan, nama_sdm1, nama_sdm2, nama_sdm3);


    $("#tbKpi3Sdm").dataTable().fnDestroy();
    var table = $('#tbKpi3Sdm').DataTable({
        processing: true,
        serverSide: true,
        pageLength: 12,
        paging: false,
        "bInfo" : false,
        ajax: {
            url: "{{ route('detailkpi.compare3Sdm') }}",
            type: "get",
            data: function (d) {
               d.month = month;
               d.year = year;
               d.sdm1 = sdm1;
               d.sdm2 = sdm2;
               d.sdm3 = sdm3;
               d.nama_sdm1 = nama_sdm1;
               d.nama_sdm2 = nama_sdm2;
               d.nama_sdm3 = nama_sdm3;
               d.jabatan = jabatan;

            }
        },
        columns: [
            { data: 'parameter_type', name: 'tes', className: 'border-end ds'},
            { data: 'DT_RowIndex', name: 'DT_RowIndex', className: "text-center border-end"},
            { data: 'parameter', name: 'parameter', className: 'border-end'},
            { data: 'trend', name: 'trend', className: 'border-end'},
            { data: 'freq', name: 'freq', className: 'border-end'},
            { data: 'bobot', name: 'bobot', className: "text-center border-end"},
            { data: 'nilai_maks', name: 'nilai_maks', className: "text-center border-end"},
            { data: 'satuan', name: 'satuan', className: "text-center border-end"},

            { data: 't1', name: 't1', className: "text-end border-end"},
            { data: 'r1', name: 'r1', className: "text-end border-end"},
            { data: 'p1', name: 'p1', className: "text-end border-end"},
            { data: 'w1', name: 'w1', className: "text-end border-end"},

            { data: 't2', name: 't2', className: "text-end border-end"},
            { data: 'r2', name: 'r2', className: "text-end border-end"},
            { data: 'p2', name: 'p2', className: "text-end border-end"},
            { data: 'w2', name: 'w2', className: "text-end border-end"},

            { data: 't3', name: 't3', className: "text-end border-end"},
            { data: 'r3', name: 'r3', className: "text-end border-end"},
            { data: 'p3', name: 'p3', className: "text-end border-end"},
            { data: 'w3', name: 'w3', className: "text-center"},

        ],

        createdRow: function ( row, data, index ) {
            if ( data['parameter_type'] == 2 ) {
                $('td', row).eq(1).addClass('text-primary');
                $('td', row).eq(2).addClass('text-primary');
                $('td', row).eq(3).addClass('text-primary');
                $('td', row).eq(4).addClass('text-primary');
                $('td', row).eq(5).addClass('text-primary');
                $('td', row).eq(6).addClass('text-primary');
                $('td', row).eq(7).addClass('text-primary');
                $('td', row).eq(8).addClass('text-primary');
                $('td', row).eq(9).addClass('text-primary');
                $('td', row).eq(10).addClass('text-primary');
                $('td', row).eq(11).addClass('text-primary');
                $('td', row).eq(12).addClass('text-primary');
                $('td', row).eq(13).addClass('text-primary');
                $('td', row).eq(14).addClass('text-primary');
                $('td', row).eq(15).addClass('text-primary');
                $('td', row).eq(16).addClass('text-primary');
                $('td', row).eq(17).addClass('text-primary');
                $('td', row).eq(18).addClass('text-primary');
            } 
        },

        drawCallback:function(value)
        {
            $('#totalBobot3SDM').html(value.json.totalBobot + '%');
            $('#boundary3SDM1').html(parseFloat(value.json.boundary1).toFixed( 2 ) + '%');
            $('#boundary3SDM2').html(parseFloat(value.json.boundary2).toFixed( 2 ) + '%');
            $('#boundary3SDM3').html(parseFloat(value.json.boundary3).toFixed( 2 ) + '%');
            $('#mainKpi3SDM1').html(parseFloat(value.json.kpi1).toFixed( 2 ) + '%');
            $('#mainKpi3SDM2').html(parseFloat(value.json.kpi2).toFixed( 2 ) + '%');
            $('#mainKpi3SDM3').html(parseFloat(value.json.kpi3).toFixed( 2 ) + '%');
            // $('#totalKpi3SDM1').html(parseFloat(value.json.totalKpi1).toFixed( 2 ) + '%');
            // $('#totalKpi3SDM2').html(parseFloat(value.json.totalKpi2).toFixed( 2 ) + '%');
            // $('#totalKpi3SDM3').html(parseFloat(value.json.totalKpi3).toFixed( 2 ) + '%');
            $('#grade3SDM1').html(value.json.grade1);
            $('#grade3SDM2').html(value.json.grade2);
            $('#grade3SDM3').html(value.json.grade3);

            $('#workload3SDM1').html(value.json.workload1);
            $('#workload3SDM2').html(value.json.workload2);
            $('#workload3SDM3').html(value.json.workload3);


            if(value.json.totalKpi1 == "KPI NULL"){
                $('#totalKpi3SDM1').html(value.json.totalKpi1);
                $('#overall3SDM1').html(value.json.overall1);
            }else{
                $('#totalKpi3SDM1').html(parseFloat(value.json.totalKpi1).toFixed( 2 ) + '%');
                $('#overall3SDM1').html(parseFloat(value.json.overall1).toFixed( 2 ) + '%');

            }

            if(value.json.totalKpi2 == "KPI NULL"){
                $('#totalKpi3SDM2').html(value.json.totalKpi2);
                $('#overall3SDM2').html(value.json.overall2);
            }else{
                $('#totalKpi3SDM2').html(parseFloat(value.json.totalKpi2).toFixed( 2 ) + '%');
                $('#overall3SDM2').html(parseFloat(value.json.overall2).toFixed( 2 ) + '%');

            }

            if(value.json.totalKpi3 == "KPI NULL"){
                $('#totalKpi3SDM3').html(value.json.totalKpi3);
                $('#overall3SDM3').html(value.json.overall3);
            }else{
                $('#totalKpi3SDM3').html(parseFloat(value.json.totalKpi3).toFixed( 2 ) + '%');
                $('#overall3SDM3').html(parseFloat(value.json.overall3).toFixed( 2 ) + '%');

            }
        }

        });

        setTitleCompare3Sdm();
        setDataSdm2();
}

function setDataSdm2()
{
    month       = $("#selectMonthSdm3").val();
    year        = $("#selectYearSdm3").val();
    position    = $("#selectPositionSdm3").val();

    $.ajax({
        url:"{{ route('detailkpi.getDataSdm') }}",
        method:"get",
        type:"json",
        data: {
          position  : position,
          month     : month,
          year      : year

        },
        success:function (data) {
            console.log(data);
            document.getElementById('cutOff3SDM').innerHTML = "Data Cut Off :" + data.co.co +  ", " +"DO Cut Off : " +data.co.co_do;
        }
    });
}


function setTitleCompare3Sdm()
{
    var namaSdm1 = $("#select3NameSdm1 option:selected").attr('data-id');
    var namaSdm2 = $("#select3NameSdm2 option:selected").attr('data-id');
    var namaSdm3= $("#select3NameSdm3 option:selected").attr('data-id');
    document.getElementById('thName3SDM1').innerHTML = namaSdm1;
    document.getElementById('thName3SDM2').innerHTML = namaSdm2;
    document.getElementById('thName3SDM3').innerHTML = namaSdm3;
    
}

var chartTrendIndikator = new Chart(document.getElementById("chartTrendIndikator"), {
  type: 'line',
  data: {
    labels: ['JAN'],
    datasets: [
      { 
        data: ['56'],
        label: 'Target',
        tension: 0.2,
        borderColor: '#FF0075',
        pointBackgroundColor : '#FF0075',
        fill: false
      },

      { 
        data: ['56'],
        label: 'Realisasi',
        tension: 0.2,
        borderColor: '#172774',
        pointBackgroundColor : '#172774',
        fill: false
      }

    ]
  },
  options: {
        plugins:{
            datalabels:{
                formatter:(value, context)=>{
                    return value
                },
                color:'#446A46',
                anchor:'end',
                align:'top'
            }
        },
        scales: {
            y: {
                beginAtZero: true,
            },

            x: {
                grid: {
                  display: false,
                },

                ticks :{
                    maxTicksLimit:75
                }
            },

        }
    },
    plugins:[ChartDataLabels]
});

function getResumeIndikator(id)
{
    id_param = id;
    kode_sdm = $("#selectNameSdm1").val();
    console.log(id_param);
    $.ajax({
        url:"{{ route('ajax.getResumeIndikator') }}",
        method:"get",
        type:"json",
        data: {
          id_param : id_param,
          kode_sdm : kode_sdm
        },
        success:function (response) {

            var target = response.trend.map(function (e) {
                return parseFloat(e.target).toFixed( 1 );
            });

            var realisasi = response.trend.map(function (e) {
                return parseFloat(e.realisasi).toFixed( 1 );
            });

            var labels = response.trend.map(function (e) {
                return e.periode;
            });

            chartTrendIndikator.data.datasets[0].data = target;
            chartTrendIndikator.data.datasets[1].data = realisasi;
            chartTrendIndikator.data.labels = labels;
            chartTrendIndikator.update();

            document.getElementById('titleIndikatorModal').innerHTML = response.title;
        }
    });
}
</script>


@endsection



<!-- validasi buat input sdm 1 2 3 caranya samain antara input2nya if input sama when onclick button maka show alert or etc. -->