@extends('layouts.master')
@section('data-sidebar')
<div id="product-cl-sec"> <a id="pl-close" class="close-btn-pl"></a>
    <div class="pro-header-text">Assign <span>KPIs Tracking</span></div>
    <div class="pc-cartlist">
        <div class="overflow-plist">
            <div class="plist-content">
                <div class="_left-filter pt-0">
                    <div class="container">
                        <div class="row">
                            <div class="col-12">
                                <div id="floating-label" class="card p-20 top_border mb-3">

                                    <div class="form-wrap p-0">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <h2 class="_head03 mb-0 assign-title">Assign <span>KPIs Tracking By</span></h2>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <label class="PT-10 font12">KPIs Tracking*</label>
                                                        <div class="form-s2">
                                                            <select class="form-control formselect select-kpi" placeholder="select Catalogue" style="width: 100%">
                                                                <option selected disabled value="0">Select KPIs Tracking</option>
                                                                @foreach ($all_kpis as $data)
                                                                    <option value="{{$data->id}}"> {{$data->title}} </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>  
                                                </div>
                                                <div class="col-12 _head03 hr-after-kpis-type">
                                                </div>
                                                <div class="row assCatalogue-radio mt-10">
                                                    <div class="col">
                                                        <div class="custom-control custom-radio">
                                                            <input class="custom-control-input" type="radio"
                                                                name="AssignCatalogue" id="byRegion" checked value=''>
                                                            <label class="custom-control-label font13"
                                                                for="byRegion">Region</label>
                                                        </div>
                                                    </div>
                                                    <div class="col">
                                                        <div class="custom-control custom-radio">
                                                            <input class="custom-control-input" type="radio"
                                                                name="AssignCatalogue" id="byArea" value=''>
                                                            <label class="custom-control-label font13"
                                                                for="byArea">Area</label>
                                                        </div>
                                                    </div>
                                                    <div class="col">
                                                        <div class="custom-control custom-radio">
                                                            <input class="custom-control-input" type="radio"
                                                                name="AssignCatalogue" id="assign_by_territory" value=''>
                                                            <label class="custom-control-label font13"
                                                                for="assign_by_territory">Territory</label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="region_div">
                                                    {{-- <br><br><br><em>if select Region than show </em><br> --}}
                                                    <h2 class="_head03 mt-20 mb-15">Select <span>Region</span></h2>
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="form-s2">
                                                                <select class="form-control formselect select_region"
                                                                    placeholder="select Region" style="width: 100%">
                                                                    <option selected value="-1">Select Region</option>
                                                                    @foreach ($region as $data)
                                                                        <option value="{{$data->id}}">{{$data->region_name}}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    {{-- <div class="col-12 mt-10 mb-10">
                                                        <hr>
                                                    </div>
                                                    <div class="added_regions_div"></div> --}}
                                                </div>
                                                {{-- <br><em>if select Territory than show</em> <br> --}}
                                                <div class="territory_div" style="display:none">
                                                    <h2 class="_head03 mt-20 mb-15">Select <span>Territory</span></h2>
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="form-s2">
                                                                <select class="form-control formselect select_territory"
                                                                    placeholder="select Territory" style="width: 100%">
                                                                    <option selected value="-1">Select Territory
                                                                    </option>
                                                                    @foreach ($territory as $data)
                                                                    <option value="{{$data->id}}">
                                                                        {{$data->territory_name}}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    {{-- <div class="col-12 mt-10 mb-10">
                                                        <hr>
                                                    </div>
                                                    <div class="added_territories_div"></div> --}}
                                                </div>
                                                {{-- <br><em>if select Area than show </em><br> --}}
                                                <div class="area_div" style="display:none">
                                                    <h2 class="_head03 mt-20 mb-15">Select <span>Area</span></h2>
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="form-s2">
                                                                <select class="form-control formselect select_area"
                                                                    placeholder="select Area" style="width: 100%">
                                                                    <option selected value="-1">Select Area
                                                                    </option>
                                                                    @foreach ($area as $data)
                                                                    <option value="{{$data->id}}">{{$data->area_name}}
                                                                    </option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    {{-- <div class="col-12 mt-10 mb-10">
                                                        <hr>
                                                    </div>
                                                    <div class="added_areas_div"></div> --}}
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="_cl-bottom">
        <button type="button" class="btn btn-primary mr-2 save_kpis_assignment">Assign KPIs Tracking</button>
        <button id="pl-close" type="button" class="btn btn-cancel mr-2">Cancel</button>
    </div>
</div>
@endsection

@section('content')
<div class="row mt-2 mb-3">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <h2 class="_head01">KPIs Tracking<span> Assignment</span></h2>
    </div>

    <div class="col-lg-6 col-md-6 col-sm-6">
        <ol class="breadcrumb">
            <li><a><span>KPIs Tracking</span></a></li>
            <li><span>List</span></li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="header">
                <a class="btn add_button assign_modal_btn"><i class="fa fa-plus"></i> <span>New Assignment</span></a>
                <h2>KPIs Tracking <span> List</span>
                    <div class="_list-total">{{sizeof($kpi_details)}}</div>
                </h2>
            </div>
            <div class="body">
                <table class="table table-hover dt-responsive nowrap" id="example" style="width:100%">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>KPI Tracking Title</th>
                            <th>Employee Name</th>
                            <th>Created By</th>
                            <th>Created At</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($kpi_details as $data)
                        <tr>
                            <td>{{$data->id}}</td>
                            <td>{{$data->kpis_title ? $data->kpis_title : 'NA'}}</td>
                            <td>{{$data->emp_first_name.' '.$data->emp_last_name}}</td>
                            <td>{{$data->created_by}}</td>
                            <td>{{date('d-M-Y',strtotime($data->created_at))}}</td>
                            <td>
                                <button class="btn btn-default btn-line edit_assignment" id="{{$data->id}}" >Edit</button>
                                <button class="btn btn-default red-bg delete_assignment" data-toggle="modal"data-target="#deleteModal" id="{{$data->id}}" >Delete</button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
    <script>
        var all_employees           = JSON.parse('{!! json_encode(removeApostrophes($employees)) !!}');
        var all_kpis_assignments    = JSON.parse('{!! json_encode(removeApostrophes($kpi_details)) !!}');
    </script>
    <script src="/modules/sr-targets/js/kpis-tracking.js"></script>
@endpush