@extends('layouts.master')
@section('content')
@section('data-sidebar')
<style>
    #product-add,
    #product-cl-sec {
        width: 750px
    }

    .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
    }

    .AddProductTable {
        padding: 0;
        margin: 0
    }

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

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

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

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

    .ProListDiv .PrList_img {
        width: 35px;
        height: 35px;
        margin-right: 10px;
        border-radius: 50%;
        border: solid 1px #0038ba
    }

    .pt-28 {
        padding-top: 28px
    }

    ._add-secon {
        color: #383d41;
        background-color: #f4f4f4;
        border-color: #f0f0f1;
        font-size: 13px;
        padding: 5px 25px 5px 8px;
    }

    ._add-secon:HOVER {
        border: solid 1px #0038ba
    }

    ._add-secon .close {
        top: 0px;
        right: 8px;
        font-size: 26px
    }

    ._add-secon .close:HOVER {
        color: #f12300 !important;
        opacity: 1 !important
    }

    ._add-secon .col {
        padding-top: 4px
    }

    ._add-secon .btn-primary {
        font-size: 12px;
        padding: 3px 15px 2px 15px;
        margin: 0;
        line-height: 1;
        margin-right: 25px;
        letter-spacing: 1px
    }

    .EmpAssign .btn-primary {
        letter-spacing: 1px;
        padding-left: 15px;
        padding-right: 15px
    }

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

    .wbtn .fa {
        color: #0038ba
    }

    .wbtn:HOVER .fa,
    .wbtn:focus .fa {
        color: #fff
    }

    .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;
    }

    .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
    }

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

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

    .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;
        border: none !important
    }

    .retailerSection {
        border: solid 1px #e9e9e9;
        background-color: #f4f4f4;
        font-size: 18px;
        margin-top: 10px;
        text-align: right;
        padding: 10px 15px;
        margin-bottom: 15px
    }

    .EmpAssign {
        float: left;
        width: 100%;
        border: solid 1px #f4f4f4;
        background-color: #f4f4f4;
        font-size: 18px;
        margin-top: 10px;
        text-align: left;
        padding: 10px 15px;
        margin-bottom: 5px;
        text-align: center;
        padding: 25px;
        border: solid 1px #e9e9e9;
    }

    .EmpAssign img {
        width: 90px;
        margin: auto
    }

    .EmpAssign strong {
        padding-top: 10px;
        padding-bottom: 10px;
        display: block
    }

    .retailerSection span,
    .EmplSelect span {
        font-family: 'Rationale', sans-serif;
        color: #0038ba;
        font-size: 22px;
    }

    .EmplSelect {
        border-top: solid 2px #0038ba;
        background-color: #f4f4f4;
        font-size: 18px;
        margin-top: 10px;
        text-align: right;
        padding: 10px 15px;
        margin-top: 10px
    }
    .fs-optgroup-label {
        text-align: left;
    }
    .trackingTable .table td, .table th {
        font-size: 12px;
    }
    .table thead th {
        font-family: proximanova-semibold, sans-serif!important;
        font-weight: normal !important;
    }
    .trackingTable  .table td, .table th {
        padding: 8px
    }
    .trackingTable .table thead th {
        border-bottom: solid 1px #0038ba !important
    }
    .table thead th{
        border: none !important;
        background-color: #f6f6f6;
    }
    .order-rate{
        height: 25px;
        width: 100px;
        padding-left: 5px;
        border: solid 1px #f6f6f6;
        background-color: #f6f6f6;
    }
    .fs-dropdown {
        width: 90%;
    }

</style>
<div class="row mt-2 mb-3">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <h2 class="_head01">KPIs Tracking<span> Management</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>{{@$kpis_tracking->id ? 'Update' : 'New'}}</span></li>
        </ol>
    </div>
</div>
<div class="row">
    <div class="col-md-12 mb-30">
        <div class="card PB-20">
            <div class="header">
                <h2>{{@$kpis_tracking->id ? 'Update' : 'New'}} <span>KPIs Tracking</span></h2>
            </div>
        <form id="kpis_tracking_form">
            <input type="hidden" id="kpi_id" name="kpi_id" value="{{@$kpis_tracking->id}}">
            @csrf 
            <div class="row m-0">
                <div class="form-wrap PB-10 PT-10">
                    <div class="row m-0">
                        <div class="col-3">
                            <div class="form-group">
                                <label class="control-label mb-5">Tilte*</label>
                                <input type="text" id="title" class="form-control required_type"
                                    name="title" value="{{@$kpis_tracking->title}}" autocomplete="off">
                            </div>
                        </div>
                        <div class="col-2">
                            <div class="form-s2">
                                <label class="font12 mb-5">Occurrence*</label>
                                <select class="form-control formselect required" id="occurrence" name="occurrence" placeholder="select Type" style="width: 100%">
                                    <option selected value="">Select Occurrence</option>
                                    <option value="1" {{@$kpis_tracking->occurrence == '1' ? 'selected' : ''}}>Monthly</option>
                                    <option value="2" {{@$kpis_tracking->occurrence == '2' ? 'selected' : ''}}>Quarterly</option>
                                    <option value="3" {{@$kpis_tracking->occurrence == '3' ? 'selected' : ''}}>Yearly</option>
                                    <option value="4" {{@$kpis_tracking->occurrence == '4' ? 'selected' : ''}}>Custom</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-2 custom-hours-div" style="display: none">
                            <div class="form-group">
                                <label class="control-label mb-5">Start Date*</label>
                                <input type="text" id="start_date" class="form-control customdate"
                                    name="start_date" value="{{@$kpis_tracking->start_date}}" autocomplete="off">
                            </div>
                        </div>
                        <div class="col-2 custom-hours-div" style="display: none">
                            <div class="form-group">
                                <label class="control-label mb-5">End Date*</label>
                                <input type="text" id="end_date" class="form-control customdate"
                                    name="end_date" value="{{@$kpis_tracking->end_date}}" autocomplete="off">
                            </div>
                        </div>
                        {{-- <div class="col-3">
                            <div class="form-s2">
                                <label class="font12 mb-5">Performance Tracking*</label>
                                <select class="form-control formselect required" id="performance_tracking" name="performance_tracking" placeholder="select Type" style="width: 100%">
                                    <option selected value="">Select Performance</option>
                                    <option value="1" {{@$kpis_tracking->performance_tracking == '1' ? 'selected' : ''}}>Slab</option>
                                    <option value="2" {{@$kpis_tracking->performance_tracking == '2' ? 'selected' : ''}}>Actual</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-2" id="reward-point">
                            <div class="form-s2">
                                <label class="font12 mb-5">Apply Reward Point*</label>
                                <select class="form-control formselect required" id="apply_reward_point" name="apply_reward_point" placeholder="select Type" style="width: 100%">
                                    <option selected value="">Select Point</option>
                                    <option value="1" {{@$kpis_tracking->apply_reward_point == '1' ? 'selected' : ''}}>Yes</option>
                                    <option value="0" {{@$kpis_tracking->apply_reward_point == '0' ? 'selected' : ''}}>No</option>
                                </select>
                            </div>
                        </div> --}}
                        <div class="col-2" id="sr-segment-div">
                            <div class="form-s2">
                                <label class="font12 mb-5">SR Segment*</label>
                                <select class="form-control formselect required" id="sr_segment" name="sr_segment" placeholder="select Type" style="width: 100%">
                                    <option selected value="">Select Segment</option>
                                    @foreach ($sr_segments as $segment)
                                        <option value="{{$segment->id}}" {{@$kpis_tracking->sr_segment_id == $segment->id ? 'selected' : ''}}>{{$segment->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        @php 
                        $kpi_select = json_decode(@$kpi_details);
                        // dd($kpi_select);
                        @endphp
                        <input type="hidden" id="all_tracking_types" value="{{$tracking_types}}">
                        <input type="hidden" id="all_tracking_details" value="{{@$kpi_details}}">
                        <div class="col-3 load-all-tracking">
                            <label class="control-label mb-5">KPIs Tracking Type*</label>
                            <div class="form-s2">
                                <select class="reports-select multi required" multiple="multiple" placeholder="Select Tracking"
                                    id="tracking-select" name="tracking[]">
                                    <option value="0" class="all-tracking-checked">All Types</option>
                                    @forelse ($tracking_groups as $gkey => $group)
                                        <optgroup label="{{$group}}">
                                            @foreach (json_decode($tracking_types) as $key => $tracking)
                                                @php
                                                    $tracking_id = $key+1;
                                                @endphp
                                                @if($gkey == '0') {{-- Percentage --}}
                                                    @if($key <= '3')
                                                        <option class="kpis-tracking" value="{{$tracking_id}}" {{ in_array($tracking_id, array_column($kpi_select, 'tracking_type')) ? 'selected' : '' }}>{{$tracking}}</option>
                                                    @endif
                                                @endif
                                                @if($gkey == '4') {{-- Value --}}
                                                    @if($key > '3' && $key <= '8')
                                                        <option class="kpis-tracking" value="{{$tracking_id}}" {{ in_array($tracking_id, array_column($kpi_select, 'tracking_type')) ? 'selected' : '' }}>{{$tracking}}</option>
                                                    @endif
                                                @endif
                                                @if($gkey == '9') {{-- Hours & Minutes --}}
                                                    @if($key > '8')
                                                        <option class="kpis-tracking" value="{{$tracking_id}}" {{ in_array($tracking_id, array_column($kpi_select, 'tracking_type')) ? 'selected' : '' }}>{{$tracking}}</option>
                                                    @endif
                                                @endif
                                            @endforeach
                                        </optgroup>
                                    @empty 
                                    @endforelse
                                </select>
                            </div>
                        </div>
                        <div class="col-auto pt-28">
                            <button type="button" id="addTracking" class="btn btn-primary">Add</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
            <div class="col-12 trackingTable body_channels mt-10" style="display: none">                           
                <table class="table table-hover dt-responsive nowrap tracking-table" style="width:100%">
                    <thead>
                        <tr>
                            <th>Sr No.</th>
                            <th>Tracking Type</th>
                            <th>Min. Value</th>
                            <th>Max. Value</th>
                            <th>Score</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                </table>
            </div>
            <div class="col-md-12 text-center PT-20">
                <button type="button" id="save-kpis-tracking" data-id="{{@$kpis_tracking->id ? 'update' : 'save' }}" class="btn btn-primary mr-2" disabled>{{@$kpis_tracking->id ? 'Update' : 'Save'}}</button>
                <a href="/kpis-tracking" class="btn btn-cancel">Cancel</a>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
    <script>
        $(document).ready(function(){
            $('.customdate').datepicker({
            autoclose: true,
            format: 'yyyy-mm-dd',
            todayHighlight: true,
            toggleActive: true,
            }).on('changeDate', function (ev) {
                $(this).datepicker('hide');
            });
        })
    </script>
    <script src="/modules/sr-targets/js/kpis-tracking.js"></script>
@endpush