@extends('layouts.master')
@section('content')
<style>
    .targetQty {
        font-size: 13px;
        height: 26px;
        box-shadow: none;
        width: 90px;
        padding-left: 10px;
        padding-right: 10px;
        border-color: #e9e9e9;
    }

    .dataTable td,
    .modal-body table td {
        padding: 3px 5px;
        vertical-align: middle;
    }

    .dataTable td .btn-default {
        margin-bottom: 0
    }

    .wbtn {
        background: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
        color: #282828;
        letter-spacing: 1px;
        margin-left: 10px
    }

    .total-tv {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        line-height: 1
    }

    .criteria-radio {
        font-size: 14px;
        line-height: 1.9;
        margin-top: 5px;
    }

    .heading {
        font-size: 16px;
        padding-top: 8px;
    }

    .heading span {
        font-family: 'proximanova-light', sans-serif !important;
        font-weight: normal;
    }

    .se_cus-type {
        padding: 0 15px 10px 15px;
    }

    .se_cus-type .form-control,
    .se_cus-type .form-s2 .select2-container .select2-selection--single {
        border: 1px solid #eeeeee;
        background-color: #fff;
    }

    .close-btn-pl {
        top: 13px;
        height: 24px
    }

    .close-btn-pl:after,
    .close-btn-pl:before {
        height: 22px;
        background-color: #717171
    }

    .report-filters {
        right: 55px
    }

    .report-state ._head01 {
        font-size: 15px
    }

    .report-state ._head01 .fa {
        color: #36b4e5;
        margin-right: 5px
    }

    .pro-header-text {
        line-height: normal;
        padding: 0;
        margin: 0;
        background: none;
    }

    .profile-center .nav-pills .nav-link,
    ._report-Head .nav-pills .nav-link {
        padding: 10px 25px;
        font-size: 15px
    }

    .itemQTY {
        font-size: 12px;
        width: 70px;
        padding: 0px 5px;
        border: solid 1px #e6e6e6
    }

    .itemIMG {
        width: 32px;
        height: 32px;
        border: solid 1px #e5e5e5;
        margin-top: -5px;
        margin-bottom: -5px;
        margin-right: 5px;
        float: left
    }

    .productSearch {
        position: relative;
        margin-top: 10px;
    }

    .productSearch input {
        height: 32px;
        border: solid 1px #eae9e9;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        padding-left: 30px;
        font-size: 13px;
        letter-spacing: 1px;
    }

    .productSearch .fa {
        position: absolute;
        top: 8px;
        left: 8px;
        color: #b5b5b5;
    }

    .AddProductTable {
        padding: 0;
        margin: 0;
        font-size: 13px;
    }

    .AddProductTable tr {
        border-bottom: solid 1px #eeeeee
    }

    .AddProductTable td {
        padding-bottom: 7px;
        padding-top: 7px
    }

    .ProListDiv {
        padding: 0;
        display: table;
    }

    .ProListDiv .PR_Name {
        display: table-cell;
        vertical-align: middle;
        font-size: 12px;
        letter-spacing: 1px;
        line-height: 16px
    }

    .ProListDiv .PrList_img {
        width: 35px;
        height: 35px;
        margin-right: 8px;
        border: solid 1px #e0e0e0
    }

    .AddProductTable .btn-default {
        padding: 5px 8px;
        font-size: 13px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        -khtml-border-radius: 0;
        background: linear-gradient(90deg, #1e54d3 0%, #0038ba 100%);
        color: #fff;
        text-align: center;
        margin: 0;
        line-height: 1;
        min-width: 74px;
        letter-spacing: 1px;
        float: right;
        border: none !important
    }

    .AddDetailPR {
        padding: 25px;
        font-size: 14px
    }

    .AddDetailPR .form-control {
        height: 32px;
        border: solid 1px #dedede;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        padding: 0px 10px;
        font-size: 13px;
        letter-spacing: 1px;
    }

    .AddDetailPR select {
        border-radius: 0;
        padding: 0px 10px;
        height: 32px;
        border: solid 1px #dedede;
        font-size: 14px
    }

    .pc-cartlist {
        padding-bottom: 38px
    }

    .target-tab {
        height: 50px;
        background-color: #ffffff;
        margin-top: 15px;
        position: relative;
    }

    .addnew-btn {
        position: absolute;
        top: 10px;
        right: 0;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 12px;
    }

    .set-unit-value {
        padding: 0 30px;
    }

    .set-unit-value .tar-qtn {
        background-color: #f1f1f1;
        border-bottom: solid 1px #fff;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .set-unit-value .unit-name {
        background-color: #fafafa;
        padding-top: 16px;
        padding-bottom: 8px;
        line-height: normal
    }

    .set-unit-value .heaing-sec {
        font-size: 14px;
        border-bottom: solid 1px #eaeaea;
        padding-top: 7px;
        padding-bottom: 3px;
    }

    .set-unit-value .unit-row {
        font-size: 14px;
        border-bottom: solid 1px #eaeaea;
    }

    .set-unit-value .unit-row .btn-primary {
        font-size: 11px;
        padding: 6px 12px;
        margin-top: 7px;
        margin-right: 5px;
        width: 65px;
    }

    .set-unit-value .unit-row .red-bg {
        border-color: #f12300 !important;
        width: auto
    }

    .set-unit-value .form-control {
        font-size: 13px;
        border: solid 1px #fff;
        border-bottom: solid 2px #fff;
        height: 28px;
        box-shadow: none;
        line-height: 30px !important;
    }

    .set-unit-value .form-control:focus {
        border: solid 1px #fff !important;
        border-bottom: solid 2px #0038ba !important;
    }

    .target-Head .nav-tabs {
        border-bottom: solid 2px #dcdcdc
    }

    .target-Head .nav-tabs .nav-link,
    .target-Head .nav-tabs .nav-item.show .nav-link,
    .target-Head .nav-tabs .nav-link.active {
        padding: 15px 30px;
        height: 54px;
        box-shadow: none;
        font-size: 15px;
        font-weight: 600;
        color: #777;
        margin-bottom: -2px;
    }

    .target-Head .nav-tabs .nav-link:focus,
    .target-Head .nav-tabs .nav-link:hover {
        color: #282828;
    }

    .target-Head .nav-tabs .nav-item.show .nav-link,
    .target-Head .nav-tabs .nav-link.active {
        color: #0038ba;
    }

    .custom-control-label {
        line-height: 2
    }

    .kpi-checkbox {
        padding-top: 10px;
        padding-bottom: 10px;
        border: solid 1px #f0f0f0;
    }

    .kpi-checkbox .btn-primary {
        font-size: 13px;
        padding: 6px 25px;
        line-height: 1;
    }

    .kpi-p-edit {
        margin: 15px 0 0 0;
        font-size: 14px
    }

    .custom-select-sm {
        border-radius: 0;
        width: 200px;
        font-size: 13px;
        height: 32px;
        border-color: #eae9e9;
    }

    .topstats {
        margin-top: 5px;
        font-size: 14px;
    }

    .topstats .gary-box {
        line-height: 1;
        background-color: #f9f9f9;
        border-bottom: solid 1px #d1d1d1;
        padding: 10px;
        letter-spacing: 1px;
    }

    .topstats .gary-box span {
        font-family: 'Rationale', sans-serif;
        color: #0038ba;
        font-size: 22px;
        float: right;
        margin-top: -4px;
    }

    .nav-pills .nav-link.active ._cus-val,
    .nav-tabs .nav-link.active ._cus-val {
        color: #fff;
        background-color: #0038ba;
    }

    .nav-pills .nav-link ._cus-val,
    .nav-tabs .nav-link ._cus-val {
        background-color: #e2e9fb;
        color: #7f8998;
        font-size: 10px;
        padding: 3px 4px 2px 4px;
        height: 16px;
        margin-top: 3px;
        margin-left: 5px;
        font-family: proximanova-light, sans-serif;
        border-radius: 5px;
        display: inline-block;
        line-height: 1;
    }

    .target-val {
        font-size: 13px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .target-val span {
        display: block
    }

    .target-val .tar-val {
        font-family: 'Rationale', sans-serif;
        color: #0038ba;
        font-size: 24px;
        border-bottom: solid 1px #b3b3b3;
        display: inline-block;
        line-height: 1;
        padding-top: 5px;
        padding-bottom: 3px;
    }

    .target-val .tar-val small {
        color: #282828
    }

    .border-right {
        border-right: solid 1px #f3f3f3
    }

    .target-val .unit-title {
        display: block;
        font-size: 15px
    }

    .pr-80 {
        padding-right: 80px;
    }
.qtyWiseProductCore{border:solid 1px #ddd; box-shadow:none;
    height: 24px; font-size: 12px; line-height: normal; padding: 5px; width:110px;
}
.add_button{right:15px; top:10px}
</style>
<div class="row mt-2 mb-3">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <h2 class="_head01">KPI <span> Management</span></h2>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6">
        <ol class="breadcrumb">
            <li><a href="#"><span>KPI</span></a></li>
            <li><span>Add</span></li>
        </ol>
    </div>
</div>
<div class="row">
    <div class="col-md-12 mb-30">
        <div class="card PB-20">
            <div id="kpiCoreSettings">
                <div class="row m-0">
                    <div class="col-md-12 p-0">
                        <div class="CataAddName">
                            <div class="form-group row m-0">
                                <h2 class="heading">Select <span>Month*</span></h2>
                                <div class="col-auto">
                                    <div class="form-group" style="height: auto">
                                        <input type="text" value="{{ $kpi ? $kpi->month.'/'.$kpi->year : '' }}"
                                            id="monthSelector" class="form-control" placeholder="">
                                    </div>
                                </div>
                                <div class="col-auto pr-0">
                                    <h2 class="heading">Select <span>Type*</span></h2>
                                </div>
                                <div class="col-auto">
                                    <select id="kpiType" class="custom-select custom-select-sm">
                                        <option value="1"
                                            {{ $kpi && $kpi->type == 1 ? 'selected' : (!$kpi ? 'selected' : '') }}>
                                            Overall Sales</option>
                                        <option value="2" {{ $kpi && $kpi->type == 2 ? 'selected' : '' }}>Product
                                        </option>
                                        <option value="3" {{ $kpi && $kpi->type == 3 ? 'selected' : '' }}>Brand</option>
                                        <option value="4" {{ $kpi && $kpi->type == 4 ? 'selected' : '' }}>Revenue
                                        </option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="header" style="padding-top:13px;padding-bottom:13px;">
                    <button class="btn add_button" disabled><i class="fa fa-copy"></i> <span> Copy Last Month's
                            Target</span></button>
                    <h2>Set <span>Target*</span></h2>
                </div>
                <div class="col-12 set-unit-value {{ $kpi && in_array($kpi->type, [1,4]) ? '' : (!$kpi ? '' : 'dn') }}"
                    id="overallWiseDiv">
                    <div class="row heaing-sec">
                        <div class="col-8"><strong>Unit Type</strong></div>
                        <div class="col-4"><strong id="tgtLbl">Target
                                {{ !$kpi ? 'Quantity' : ($kpi->type == 1 ? 'Quantity' : 'Revenue') }}</strong></div>
                    </div>
                    @foreach ($primary_units as $pu)
                    <div class="row unit-row">
                        <div class="col-8 unit-name">{{ $pu->unit_name }}</div>
                        <div class="col-4 tar-qtn">
                            <input unit-id="{{ $pu->unit_id }}"
                                value="{{ $kpi && $kpi->type == 1 ? $pu->target : ($kpi && $kpi->type == 4 ? $pu->revenue : '') }}"
                                type="text" class="form-control primUnitsTgt" id="" placeholder=""></div>
                    </div>
                    @endforeach
                    <div class="row unit-row">
                        <div class="col-8 unit-name total-tv text-right"><strong id="ttlTgtLbl">Total Target
                                {{!$kpi ? 'Unit' : ($kpi->type == 1 ? 'Unit' : 'Revenue')}}</strong></div>
                        <div class="col-4 tar-qtn total-tv"><strong id="ttlTargetUnitCore">{{ $kpi && $kpi->type == 1 ? number_format(array_sum(array_column(json_decode(json_encode($primary_units), TRUE), "target"))) : ($kpi && $kpi->type == 4 ? number_format(array_sum(array_column(json_decode(json_encode($primary_units), TRUE), "revenue"))) : '0.00') }}</strong></div>
                    </div>
                </div>
                <div class="col-12 PT-10 PB-10 {{ $kpi && $kpi->type == 2 ? '' : 'dn' }} " id="productWiseDiv">
                    <table class="table table-hover dt-responsive nowrap" id="productWiseTbl" style="width:100%">
                        <thead>
                            <tr>
                                <th>SKU</th>
                                <th>Product Name</th>
                                <th>Primary Unit</th>
                                <th>Set Target</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($product_wise as $p)
                            <tr>
                                <td>{{ $p->sku }}</td>
                                <td>
                                    <div class="ProListDiv"><img class="PrList_img" src="{{ $p->thumbnail }}" alt="" />
                                        <div class="PR_Name">{{ $p->item_name }}</div>
                                    </div>
                                </td>
                                <td>{{ $p->unit_name }}</td>
                                <td>
                                    <input type="text" value="{{ $kpi ? $p->target : '' }}"
                                        class="form-control qtyWiseProductCore" placeholder="">
                                </td>
                                <td>
                                    @if ($kpi && $p->target)
                                    <button pref-id="{{ $p->pref_id }}"
                                        class="btn btn-default btn-line updateProductWiseCore">Update</button>
                                    <button pref-id="{{ $p->pref_id }}"
                                        class="btn btn-default removeProductWiseCore">Remove</button>
                                    @else
                                    <button pref-id="{{ $p->pref_id }}"
                                        class="btn btn-default btn-line addProductWiseCore">Add</button>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="col-12 PT-10 PB-10 {{ $kpi && $kpi->type == 3 ? '' : 'dn' }} " id="brandWiseDiv">
                    <table class="table table-hover dt-responsive nowrap" id="brandWiseTbl" style="width:100%">
                        <thead>
                            <tr>
                                <th>Brand Name</th>
                                <th>Primary Unit</th>
                                <th>Set Target</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($brand_wise as $b)
                            <tr>
                                <td>{{ $b['brand_name'] }}</td>
                                <td>{{ $b['unit_name'] }}</td>
                                <td>
                                    <input type="text"
                                        value="{{ $kpi ? (isset($b['target']) ? $b['target'] : '') : '' }}"
                                        class="form-control qtyWiseBrandCore" placeholder="">
                                </td>
                                <td>
                                    @if ($kpi && $b['target'])
                                    <button brand-id="{{ $b['brand_id'] }}" unit-id="{{ $b['unit_id'] }}"
                                        class="btn btn-default btn-line updateBrandWiseCore">Update</button>
                                    <button brand-id="{{ $b['brand_id'] }}" unit-id="{{ $b['unit_id'] }}"
                                            class="btn btn-default removeBrandWiseCore">Remove</button>
                                    @else
                                    <button brand-id="{{ $b['brand_id'] }}" unit-id="{{ $b['unit_id'] }}"
                                        class="btn btn-default btn-line addBrandWiseCore">Add</button>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="col-12">
                    <div class="row PT-10 PB-10" style="background-color: #f0f0f0">
                        <div class="col-12 text-right">
                            <button type="button" class="btn btn-primary" id="saveKpiCore">Save</button>
                            <button type="button" class="btn btn-primary wbtn" id="addAdditionalKpis">Add Additional
                                KPI's</button>
                        </div>
                    </div>
                    <div class="row kpi-checkbox font13 {{ $kpi_additionals ? '' : 'dn' }}" id="additionalPrefs">
                        <div class="col">
                            <div class="custom-control custom-checkbox mr-sm-2">
                                <input type="checkbox" name="additional_kpi[]"
                                    class="custom-control-input supplementary_services_client" value="product"
                                    id="target001"
                                    {{ $kpi_additionals && sizeof(array_filter($kpi_additionals, fn($x) => $x['type_id'] == 1)) ? 'checked' : '' }}>
                                <label class="custom-control-label" for="target001">Focused
                                    Products</label>
                            </div>
                        </div>
                        <div class="col">
                            <div class="custom-control custom-checkbox mr-sm-2">
                                <input type="checkbox" name="additional_kpi[]"
                                    class="custom-control-input supplementary_services_client" value="brand"
                                    id="target002"
                                    {{ $kpi_additionals && sizeof(array_filter($kpi_additionals, fn($x) => $x['type_id'] == 2)) ? 'checked' : '' }}>
                                <label class="custom-control-label" for="target002">Focused
                                    Brands</label>
                            </div>
                        </div>
                        <div class="col">
                            <div class="custom-control custom-checkbox mr-sm-2">
                                <input type="checkbox" name="additional_kpi[]"
                                    class="custom-control-input supplementary_services_client" value="channel"
                                    id="target003"
                                    {{ $kpi_additionals && sizeof(array_filter($kpi_additionals, fn($x) => $x['type_id'] == 3)) ? 'checked' : '' }}>
                                <label class="custom-control-label" for="target003">Channels</label>
                            </div>
                        </div>
                        <div class="col">
                            <div class="custom-control custom-checkbox mr-sm-2">
                                <input type="checkbox" name="additional_kpi[]"
                                    class="custom-control-input supplementary_services_client" value="other"
                                    id="target004"
                                    {{ $kpi_additionals && sizeof(array_filter($kpi_additionals, fn($x) => $x['type_id'] == 4)) ? 'checked' : '' }}>
                                <label class="custom-control-label" for="target004">Other KPI's</label>
                            </div>
                        </div>
                        <div class="col text-right">
                            <button type="button" class="btn btn-primary" id="selectAdditionalKpi">Add</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header additionalKpisHeader dn">
                <button class="btn add_button" id="editSavedKpi"><i class="fa fa-pencil-alt"></i> <span>
                        Edit</span></button>
                <h2>Set <span>Additional KPI's</span></h2>
                <div class="float-right font14 pr-80" id="saveKpiMonthLbl"></div>
            </div>
            <div class="col-12 {{ $kpi_additionals ? '' : 'dn' }} pillsDiv">
                <button class="btn add_button" style="z-index: 15; right: 15px;top: 12px;"><i class="fa fa-upload"></i>
                    <span> Bulk
                        Upload </span></button>
                <div class="_report-Head target-tab mt-5">
                    <ul class="nav nav-pills mb-3 mt-0" id="pills-tab2" role="tablist">
                        <li
                            class="nav-item {{ $kpi_additionals && sizeof(array_filter($kpi_additionals, fn($x) => $x['type_id'] == 1)) ? '' : 'dn' }} fprodsTab">
                            <a class="nav-link {{ $kpi_additionals && sizeof(array_filter($kpi_additionals, fn($x) => $x['type_id'] == 1)) ? 'show active' : '' }}"
                                id="pills-product-tab2" data-toggle="pill" href="#prodWiseAddKpiTblDiv" role="tab"
                                aria-controls="prodWiseAddKpiTblDiv" aria-selected="true">Focused Products <span
                                    class="_cus-val"> {{ sizeof($product_wise) }}
                                </span></a>
                        </li>
                        <li
                            class="nav-item {{ $kpi_additionals && sizeof(array_filter($kpi_additionals, fn($x) => $x['type_id'] == 2)) ? '' : 'dn' }} fbrandsTab">
                            <a class="nav-link {{ $kpi_additionals && sizeof(array_filter($kpi_additionals, fn($x) => $x['type_id'] == 2)) ? 'show active' : '' }}"
                                id="brandWiseAddKpiTblDiv-tab" data-toggle="pill" href="#brandWiseAddKpiTblDiv"
                                role="tab" aria-controls="brandWiseAddKpiTblDiv" aria-selected="false">Focused Brands
                                <span class="_cus-val"> {{ sizeof($brand_wise) }}
                                </span></a>
                        </li>
                        <li
                            class="nav-item {{ $kpi_additionals && sizeof(array_filter($kpi_additionals, fn($x) => $x['type_id'] == 3)) ? '' : 'dn' }} fChannelsTab">
                            <a class="nav-link {{ $kpi_additionals && sizeof(array_filter($kpi_additionals, fn($x) => $x['type_id'] == 3)) ? 'show active' : '' }}"
                                id="chanWiseAddKpiTblDiv-tab" data-toggle="pill" href="#chanWiseAddKpiTblDiv" role="tab"
                                aria-controls="chanWiseAddKpiTblDiv" aria-selected="false">Channels <span
                                    class="_cus-val"> {{ sizeof($channel_wise) }} </span></a>
                        </li>
                        <li
                            class="nav-item {{ $kpi_additionals && sizeof(array_filter($kpi_additionals, fn($x) => $x['type_id'] == 4)) ? '' : 'dn' }} fOthersTab">
                            <a class="nav-link {{ $kpi_additionals && sizeof(array_filter($kpi_additionals, fn($x) => $x['type_id'] == 4)) ? 'show active' : '' }}"
                                id="otherAddKpiTblDiv-tab" data-toggle="pill" href="#otherAddKpiTblDiv" role="tab"
                                aria-controls="otherAddKpiTblDiv" aria-selected="false">Other KPI's <span
                                    class="_cus-val"> 3 </span></a>
                        </li>
                    </ul>
                </div>
                <div class="tab-content" id="pills-tabContent2">
                    <div class="tab-pane fade" id="prodWiseAddKpiTblDiv" role="tabpanel"
                        aria-labelledby="prodWiseAddKpiTblDiv-tab">
                        <div class="PT-10">
                            <table class="table table-hover dt-responsive nowrap" id="prodWiseAdditionalKpiTbl"
                                style="width:100%">
                                <thead>
                                    <tr>
                                        <th>SKU</th>
                                        <th>Product Name</th>
                                        <th>Primary Unit</th>
                                        <th>Set Target</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($product_wise as $p)
                                    <tr>
                                        <td>{{ $p->sku }}</td>
                                        <td>
                                            <div class="ProListDiv"><img class="PrList_img" src="{{ $p->thumbnail }}"
                                                    alt="" />
                                                <div class="PR_Name">{{ $p->item_name }}</div>
                                            </div>
                                        </td>
                                        <td>{{ $p->unit_name }}</td>
                                        <td>
                                            <input type="text" value="{{ $kpi ? $p->additional_target : '' }}"
                                                class="form-control qtyWiseProductAdditionalKpi" placeholder="">
                                        </td>
                                        <td>
                                            @if ($kpi && $p->additional_target)
                                            <button pref-id="{{ $p->pref_id }}"
                                                class="btn btn-default btn-line updateProductWiseAdditionalKpi">Update</button>
                                            <button pref-id="{{ $p->pref_id }}"
                                                class="btn btn-default removeProductWiseAdditionalKpi">Remove</button>
                                            @else
                                            <button pref-id="{{ $p->pref_id }}"
                                                class="btn btn-default btn-line addProductWiseAdditionalKpi">Add</button>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="brandWiseAddKpiTblDiv" role="tabpanel"
                        aria-labelledby="brandWiseAddKpiTblDiv-tab">
                        <div class="PT-10">
                            <table class="table table-hover dt-responsive nowrap" id="brandWiseAdditionalKpiTbl"
                                style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Brand Name</th>
                                        <th>Primary Unit</th>
                                        <th>Set Target</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($brand_wise as $b)
                                    <tr>
                                        <td>{{ $b['brand_name'] }}</td>
                                        <td>{{ $b['unit_name'] }}</td>
                                        <td>
                                            <input type="text"
                                                value="{{ $kpi ? (isset($b['additional_target']) ? $b['additional_target'] : '') : '' }}"
                                                class="form-control qtyWiseBrandAdditionalKpi" placeholder="">
                                        </td>
                                        <td>
                                            @if ($kpi && $b['additional_target'])
                                            <button brand-id="{{ $b['brand_id'] }}" unit-id="{{ $b['unit_id'] }}"
                                                class="btn btn-default btn-line updateBrandWiseAdditionalKpi">Update</button>
                                            <button brand-id="{{ $b['brand_id'] }}" unit-id="{{ $b['unit_id'] }}"
                                                    class="btn btn-default removeBrandWiseAdditionalKpi">Remove</button>
                                            @else
                                            <button brand-id="{{ $b['brand_id'] }}" unit-id="{{ $b['unit_id'] }}"
                                                class="btn btn-default btn-line addBrandWiseAdditionalKpi">Add</button>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="chanWiseAddKpiTblDiv" role="tabpanel"
                        aria-labelledby="pills-channels-tab2">
                        <div class="PT-10">
                            <table class="table table-hover dt-responsive nowrap" id="channelTypeAdditionalKpiTbl"
                                style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Channel Name</th>
                                        <th>Set Target</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($channel_wise as $c)
                                    <tr>
                                        <td>{{ $c->retailer_type_name }}</td>
                                        <td>
                                            <input type="text" value="{{ $kpi ? $c->additional_target : '' }}"
                                                class="form-control chanWiseTgtQtyAdditionalKpi" placeholder="">
                                        </td>
                                        <td>
                                            @if ($kpi && $c->additional_target)
                                            <button channel-id="{{ $c->id }}"
                                                class="btn btn-default btn-line updateChannelWiseAdditionalKpi">Update</button>
                                            <button channel-id="{{ $c->id }}"
                                                    class="btn btn-default removeChannelWiseAdditionalKpi">Remove</button>
                                            @else
                                            <button channel-id="{{ $c->id }}"
                                                class="btn btn-default btn-line addChannelWiseAdditionalKpi">Add</button>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="otherAddKpiTblDiv" role="tabpanel"
                        aria-labelledby="otherAddKpiTblDiv-tab">
                        <div class="PT-10">
                            <table class="table table-hover dt-responsive nowrap" id="otherKpisTbl" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Other KPI's</th>
                                        <th>Set Target</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Average Productivity Target (%)</td>
                                        <td>
                                            <input type="text" class="form-control targetQty" value="{{ sizeof($kpi_additionals) && sizeof(array_filter($kpi_additionals, fn($x) => $x['type_id'] == 4)) ? array_values(array_filter($kpi_additionals, fn($x) => $x['type_id'] == 4))[0]['avg_productivity'] : '' }}" id="avg_productivity"
                                                placeholder="">
                                        </td>
                                        <td>
                                            @if (sizeof($kpi_additionals) && sizeof(array_filter($kpi_additionals, fn($x) => $x['type_id'] == 4)) && array_values(array_filter($kpi_additionals, fn($x) => $x['type_id'] == 4))[0]['avg_productivity'])
                                            <button column="avg_productivity"
                                                class="btn btn-default btn-line updateOtherAdditionalKpi">Update</button>
                                            <button column="avg_productivity"
                                                    class="btn btn-default removeOtherAdditionalKpi">Remove</button>
                                            @else
                                            <button class="btn btn-default btn-line addOtherKpiBtn"
                                                column="avg_productivity">Add</button>
                                            @endif
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Average SKUs Per Bill Target</td>
                                        <td>
                                            <input type="text" class="form-control targetQty" value="{{ sizeof($kpi_additionals) && sizeof(array_filter($kpi_additionals, fn($x) => $x['type_id'] == 4)) ? array_values(array_filter($kpi_additionals, fn($x) => $x['type_id'] == 4))[0]['avg_sku_per_bill'] : '' }}" id="avg_sku_per_bill"
                                                placeholder="">
                                        </td>
                                        <td>
                                            @if (sizeof($kpi_additionals) && sizeof(array_filter($kpi_additionals, fn($x) => $x['type_id'] == 4)) && array_values(array_filter($kpi_additionals, fn($x) => $x['type_id'] == 4))[0]['avg_sku_per_bill'])
                                            <button column="avg_sku_per_bill"
                                                class="btn btn-default btn-line updateOtherAdditionalKpi">Update</button>
                                            <button column="avg_sku_per_bill"
                                                    class="btn btn-default removeOtherAdditionalKpi">Remove</button>
                                            @else
                                            <button class="btn btn-default btn-line addOtherKpiBtn"
                                                column="avg_sku_per_bill">Add</button>
                                            @endif
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Average Drop Size Per Bill</td>
                                        <td>
                                            <input type="text" class="form-control targetQty" value="{{ sizeof($kpi_additionals) && sizeof(array_filter($kpi_additionals, fn($x) => $x['type_id'] == 4)) ? array_values(array_filter($kpi_additionals, fn($x) => $x['type_id'] == 4))[0]['avg_drop_size_per_bill'] : '' }}"
                                                id="avg_drop_size_per_bill" placeholder="">
                                        </td>
                                        <td>
                                            
                                            @if (sizeof($kpi_additionals) && sizeof(array_filter($kpi_additionals, fn($x) => $x['type_id'] == 4)) && array_values(array_filter($kpi_additionals, fn($x) => $x['type_id'] == 4))[0]['avg_drop_size_per_bill'])
                                            <button column="avg_drop_size_per_bill"
                                                class="btn btn-default btn-line updateOtherAdditionalKpi">Update</button>
                                            <button column="avg_drop_size_per_bill"
                                                    class="btn btn-default removeOtherAdditionalKpi">Remove</button>
                                            @else
                                            <button class="btn btn-default btn-line addOtherKpiBtn"
                                                column="avg_drop_size_per_bill">Add</button>
                                            @endif
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12 text-center PT-20">
            <button type="button" id="saveAdditionalKpisFinal" class="btn btn-primary mr-2 {{ Request::segment(1) !== 'EditKpi' ? 'dn' : '' }}">Save Additional KPIs</button>
                <a href="/ListKpi" type="button" class="btn btn-cancel">Back</a>
            </div>
        </div>
    </div>
</div>
@endsection