@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">Select <span class="sidebar_header_title"> Region</span>
        </div>
        <div class="se_cus-type form-wrap p-15">
            <div class="row">
                <div class="col">
                    <div class="productSearch"><i class="fa fa-search"></i>
                        <input type="text" class="form-control search_regions" id="" placeholder="Search">
                    </div>
                </div>
                {{-- <div class="col-auto">
                    <button class="btn btn-default btn-primary mb-0 add_all_regions sidebar_btn_search"
                        style="letter-spacing:1px; font-size:13px; padding:10px 20px;line-height:1;">Add All
                        Regions</button>
                </div> --}}
            </div>
        </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 class="card top_border p-15">
                                        <table class="AddProductTable font13" width="100%">
                                            <thead>
                                                <tr>
                                                    <th class="sidebar_th">Region Name</th>
                                                    <th class="text-right">Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody class="region_table_body">

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="_cl-bottom">
            <button type="button" class="btn btn-primary mr-2 add-sidebar" id="pl-close">Add</button>
            <button id="pl-close" type="button" class="btn btn-cancel mr-2">Cancel</button>
        </div>
    </div>
@endsection
@section('content')
<script src="/js/list.js"></script>
<link rel="stylesheet" href="/css/list-pagination.css">
<style>
    .dis-slab-card {
        font-size: 13px;
        margin: 0;
    }

    .dis-input {
        font-size: 13px;
        border: solid 1px #e8e8e8;
        width: 240px;
        height: 25px;
        padding-left: 8px
    }

    .dis-input:focus {
        border: solid 1px #0038ba
    }

    .topsec {
        background-color: #f7f7f7;
        font-size: 14px;
        line-height: 25px;
        padding: 10px 0px;
        margin: 0;
        border-bottom: solid 1px #0038ba;
        cursor: pointer
    }

    .topsec i {
        float: right;
        font-size: 18px;
        line-height: 25px;
        color: #a4a4a4
    }

    .bottomsec {
        background-color: #ededed;
        padding: 10px 15px;
    }

    .dis-slab-card .btn-primary {
        font-size: 13px;
        padding: 5px 12px;
        line-height: 1;
        box-shadow: none;
    }

    .dis-slab-card .red-bg {
        border-color: #f12300;
        box-shadow: none;
    }

    .dis-slab-card .add-slab-btn {
        font-size: 14px;
        padding: 5px 12px;
        height: 28px;
        letter-spacing: 1px;
        margin-left: 10px;
    }

    .add-region-btn {
        font-size: 13px;
        padding: 4px 10px;
        float: right;
        letter-spacing: 1px;
        margin-top: -3px;
    }


    .slab-card-row {
        line-height: 25px;
        border: solid 1px #e5e5e5;
        border-top: none;
        margin: 0;
        padding-bottom: 10px;
        padding-top: 10px;
    }

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

    .w100 {
        width: 100px;
    }

    .w70 {
        width: 70px;
    }

    .custom-control-label {
        line-height: 2;
        letter-spacing: 1px
    }

    /* .custom-control-label::after {
        border: solid 1px #0038ba
    }

    .custom-control-label::before {
        background-color: #fff;
    } */

    .btn-collapse {
        padding: 5px 10px;
        font-size: 15px;
        line-height: 1;
        background-color: #f7f7f7;
    }

    .heading2 {
        padding: 10px 20px !important;
        border-bottom: solid 1px #f0f0f0 !important;
        width: 100% !important;
        margin-top: 10px !important;
        background: transparent !important;
    }

    .heading2 h2 {
        font-size: 16px !important;
    }

    .heading2 h2:before {
        top: 0 !important
    }

    .weekselect {
        line-height: 1px;
        height: 25px;
        width: 130px;
        border: solid 1px #e8e8e8;
        border-radius: 0;
        outline: none !important;
    }

    .weekselect:focus {
        border-color: #0038ba
    }

    .reg-list {
        clear: both;
    }

    .reg-list .alert-color {
        display: inline-block;
        padding: 8px 25px 6px 7px;
        margin: 8px 8px 0px 0px;
        line-height: 1;
        font-size: 12px;
        letter-spacing: 1px;
        float: left;
    }

    .reg-list .alert-color .close {
        position: absolute;
        top: 3px;
        right: 5px;
        border: none;
        outline: none;
        font-size: 22px;
    }

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

    .step-title {
        font-size: 15px;
        float: right;
        font-family: proximanova-semibold, sans-serif !important;
        position: absolute;
        top: 15px;
        right: 15px;
    }

    .step-title span {
        font-size: 16px;
        background-color: #0038ba;
        padding: 5px;
        color: #fff;
        margin-left: 75px;
        position: relative;
    }

    .step-title span:before {
        background: #9e9e9e;
        position: absolute;
        width: 50px;
        height: 1px;
        left: -65px;
        top: 0;
        content: '';
        bottom: 0;
        margin: auto;
    }

    .header-tabs {
        box-shadow: none !important;
        padding-top: 10px;
        margin-bottom: 0;
        position: relative;
    }

    .header-tabs .nav-tabs .nav-item.show .nav-link,
    .header-tabs .nav-tabs .nav-link,
    .header-tabs .nav-tabs .nav-link.active {
        color: #c4c4c4;
        border-bottom: solid 3px #c4c4c4;
        margin-left: 5px;
        font-size: 16px;
        letter-spacing: normal;
        padding: 10px 11px;
    }

    .header-tabs .nav-tabs .nav-item.show,
    .header-tabs .nav-tabs .nav-link.active {
        border-bottom: solid 3px #0038ba;
        color: #0038ba;
        margin-left: 5px;
    }

    .nav-tabs {
        border-bottom: 1px solid #dee2e6 !important;
    }

    .retailerTable {
        padding-top: 10px;
    }

    .retailerTable .table thead th {
        font-size: 12px;
        padding: 5px 8px !important
    }

    .retailerTable .table td {
        font-size: 12px !important;
        padding: 5px 8px !important;
        vertical-align: middle;
        line-height: 1
    }

    .no-found-holder {
        text-align: center;
        border: solid 1px #e5e5e5;
        min-height: 230px;
        display: flex;
        color: #c3c3c3;
        font-size: 14px;
        margin-top: 15px;
    }

    .tab-content>.tab-pane {
        min-height: 350px;
    }

    .Duration-overview {
        font-size: 13px;
        padding: 10px;
        font-size: 13px;
        background: #f9f9f9;
        margin: 15px;
    }

    .table td,
    .table th {
        padding: 0.5rem 0.3125rem;
        font-size: 12px;
    }

    .table thead th {
        border: none !important;
        background-color: #f6f6f6;
    }

    .div.dataTables_wrapper div.dataTables_filter input {
        box-shadow: none !important;
    }

    .min-h-auto {
        min-height: auto !important;
    }

    .CL-Product {
        width: 230px;
        position: absolute;
        right: 5px;
        top: 15px;
    }

    .CL-Product .fa {
        position: absolute;
        top: 8px;
        left: 8px;
        color: #b5b5b5;
    }

    .CL-Product input {
        height: 32px;
        border: solid 1px #dedede !important;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        padding-left: 30px;
        font-size: 13px;
        letter-spacing: 1px;
    }

    #floating-label .form-control:focus {
        border: solid 1px #0038ba !important;
    }
    .table-overflow{
        width: 100%; 
        overflow-x: auto;
    }
    .table thead th{
        background-color: #fafafa;
        vertical-align: middle;
        border: 1px solid #dddddd !important;
        padding: 4px 5px;
    }
    .table{
        border-bottom: solid 1px #dee2e6 !important;
    }
   
</style>

    <div class="row mt-2 mb-3">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">Incentive <span> Management</span></h2>
        </div>

        <div class="col-lg-6 col-md-6 col-sm-6">
            <ol class="breadcrumb">
                <li><a href="#"><span>Incentive</span></a></li>
                <li><span>Settings</span></li>
            </ol>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 mb-30">
            <div class="card PB-20" id="floating-label">

                <div class="col-12">

                    <div class="header-tabs">
                        <div class="nav nav-tabs" id="nav-tab" role="tablist">
                            <a class="nav-item nav-link active" id="step-1-tab" data-toggle="tab" href="#step-1"
                                role="tab" aria-controls="step-1" aria-selected="false" style="pointer-events: none">1 -
                                Duration & Criteria</a>

                            <a class="nav-item nav-link" id="step-2-tab" data-toggle="tab" href="#step-2" role="tab"
                                aria-controls="step-2" aria-selected="false" style="pointer-events: none">2 - Performance Slab</a>

                            <a class="nav-item nav-link" id="step-3-tab" data-toggle="tab" href="#step-3" role="tab"
                                aria-controls="step-3" aria-selected="false" style="pointer-events: none">3 - Overall
                                Target</a>

                            <a class="nav-item nav-link" id="step-4-tab" data-toggle="tab" href="#step-4" role="tab"
                                aria-controls="step-4" aria-selected="false" style="pointer-events: none">4 - Brand
                                Target</a>


                            <a class="nav-item nav-link" id="step-5-tab" data-toggle="tab" href="#step-5" role="tab"
                                aria-controls="step-5" aria-selected="false" style="pointer-events: none">5 - Product
                                Target</a>

                            <a class="nav-item nav-link" id="step-6-tab" data-toggle="tab" href="#step-6" role="tab"
                                aria-controls="step-6" aria-selected="false" style="pointer-events: none">6 - Overview</a>

                        </div>
                        <div class="step-title">Step <span class="step_number">01</span></div>

                    </div>

                </div>


                <div class="col-12 p-0">
                    <div class="tab-content" id="nav-tabContent">

                        <div class="tab-pane fade show active" id="step-1" role="tabpanel" aria-labelledby="step-1-tab">
                            <div class="header heading2" style="mask-type: 5px !important;">
                                <h2>Select <span>Duration Type</span></h2>
                            </div>
                            <input type="hidden" class="incentive_id" name="incentive_id">
                            <form id="SaveRecord">
                                @csrf
                                <div class="form-wrap row pb-0 PT-10 font14">
                                    <div class="col-3">
                                        <label class="font12 mb-5">Select Duration Type</label>
                                        <div class="form-s2">
                                            <select class="form-control formselect duration_type" name="duration_type" placeholder="Select Type"
                                                style="width: 100%">
                                                <option value="1">Monthly</option>
                                                <option value="2">Quarterly</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-2">
                                        <label class="font12 mb-5">Start Month</label>
                                        <div class="form-group mb-0" style="height: auto">
                                            <input type="text" id="datepicker2" name="start_month" class="form-control start_month required"
                                                placeholder="" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        <label class="font12 mb-5">End Month</label>
                                        <div class="form-group mb-0" style="height: auto">
                                            <input type="text" id="datepicker2" name="end_month" class="form-control end_month required"
                                                placeholder="" autocomplete="off">
                                        </div>
                                    </div>
                                </div>
                                <div class="header heading2">
                                    <h2>Select <span>Sale Type</span></h2>
                                </div>
                                <div class="form-wrap row pb-0 PT-10">
                                    <div class="col-auto">
                                        <div class="custom-control custom-radio">
                                            <input class="custom-control-input" type="radio" name="sales_type" id="primary" value="1">
                                            <label class="custom-control-label font13" for="primary">Primary</label>
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <div class="custom-control custom-radio">
                                            <input class="custom-control-input" type="radio" name="sales_type" id="secondary" value="2">
                                            <label class="custom-control-label font13" for="secondary">Secondary</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="header heading2">
                                    <h2>Add <span>Criteria</span></h2>
                                </div>
                                <div class="form-wrap row pb-0 PT-10 font14">
                                    <div class="col-3">
                                        <label class="font12 mb-5">Select Criteria</label>
                                        <div class="form-s2">
                                            <select class="form-control formselect criteria-id required" name="criteria_type" placeholder="Select Criteria"
                                                style="width: 100%">
                                                {{-- <option>Select Criteria</option> --}}
                                                <option value="1" selected>Region</option>
                                                <option value="2">Area</option>
                                                <option value="3">Territory</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="header heading2 mt-15" style="margin-top:5px!important">
                                    <h2 class="criteria_title">Region <span>List</span></h2>
                                    <button id="productlist0" class="btn btn-primary productlist01 add-region-btn criteria_btn" type="button"><i
                                            class="fa fa-plus"></i>Add Region</button>
                                </div>
                                <div class="col-12 reg-list added_region_div" style="margin-bottom:40px">

                                </div>
                                <div class="clearfix"></div>
                                <div class="col-12 p-0">
                                    <div class="header heading2">
                                        <h2>Choose <span>Designation</span></h2>
                                    </div>
                                </div>
                                <div class="form-wrap row pb-0 PT-10 font14">
                                    <div class="col-3 load-all-designations">
                                        <input type="hidden" id="type" name="type" value="monthWise">
                                        <label class="font12 mb-5">Select Designation</label>
                                        <div class="form-group" style="height: auto">
                                            <select class="reports-select designation_dropdown required multi" multiple="multiple">
                                                
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="tab-pane fade" id="step-2" role="tabpanel" aria-labelledby="step-2-tab">

                            <div class="header heading2" style="margin-top: 5px !important;">
                                <h2>Performance  <span>Slab</span></h2>
                            </div>

                            <div class="col-12 dis-slab-card PT-15">
                                <form id="SaveRecord">
                                    @csrf
                                    <input type="hidden" class="incentive_id" name="incentive_id">
                                    <span class="achievement-div" row-no="1"></span>
                                </form>
                                <div class="bottomsec">
                                    <div class="row">
                                        <div class="col text-right">
                                            <button type="button"
                                                class="btn btn-primary add-slab-btn add-more-slab"><i
                                                    class="fa fa-plus"></i> Add New Slab</button>
                                            {{-- <button type="button"
                                                class="btn btn-primary btn-line add-slab-btn save-btn-incentive"
                                                data-toggle="collapse"
                                                data-target="#collapseIncentive01" aria-expanded="false"
                                                aria-controls="collapseIncentive01">Save</button> --}}
                                        </div>
                                    </div>
                                </div>
                            
                            </div>

                        </div>
                        <div class="tab-pane fade" id="step-3" role="tabpanel" aria-labelledby="step-3-tab">

                            <div class="header heading2" style="margin-top:5px!important">
                                <h2>Overall <span>Target</span></h2> 
                            </div>
                            <div class="row dis-slab-card">
                                <div class="col-12 PT-15 target-tables">  
                                    
                                 
                                </div> 

                            </div>

                            {{-- <div class="row dis-slab-card">
                                <div class="col-12 PT-15">
                                    <div type="submit" class="row topsec" data-toggle="collapse"
                                        data-target="#collapseIncentive01" aria-expanded="false"
                                        aria-controls="collapseIncentive01">
                                        <div class="col-12"><strong>Overall Target Achievement </strong>
                                            <i class="fa fa-angle-down"></i>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 collapse show" id="collapseIncentive01">
                                    <span class="achievment-div">
                                        
                                    </span>

                                    <div class="bottomsec">
                                        <div class="row">
                                            <div class="col-auto pr-0">
                                                <div class="custom-control custom-checkbox mr-sm-2">
                                                    <input type="checkbox" name="churn" class="custom-control-input"
                                                        value="churn" id="churn01">
                                                    <label class="custom-control-label"
                                                        for="churn01"><strong>Disqualification:</strong> If
                                                        achievment is less than </label>
                                                </div>
                                            </div>
                                            <div class="col-auto p-0"><input style="margin-left:5px;margin-right:5px"
                                                    type="text" class="dis-input w70" placeholder=""></div>
                                            <div class="col-auto pr-0" style="line-height:2;padding-left:5px;"> % in the
                                            </div>
                                            <div class="col-auto">
                                                <select class="weekselect">
                                                    <option>Select Week </option>
                                                    <option>First Week </option>
                                                    <option>2nd Week</option>
                                                    <option>3rd Week</option>
                                                </select>
                                            </div>
                                            <div class="col text-right">
                                                <button type="submit" class="btn btn-primary add-slab-btn"><i
                                                        class="fa fa-plus"></i> Add New Slab</button>
                                                <!-- <button type="submit"
                                                    class="btn btn-primary btn-line add-slab-btn"
                                                    data-toggle="collapse"
                                                    data-target="#collapseIncentive01" aria-expanded="false"
                                                    aria-controls="collapseIncentive01">Save</button> -->
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div> --}}

                        </div>

                        <div class="tab-pane fade" id="step-4" role="tabpanel" aria-labelledby="step-4-tab">

                            <div class="header heading2" style="margin-top:5px!important">
                                <h2>Brand <span>Target Achievement</span></h2>
                                <button id="productlist0" class="btn btn-primary productlist01 add-region-btn add-brands"><i
                                        class="fa fa-plus"></i> Add Brand</button>
                            </div>

                            <div class="col-12">
                                <div class="row m-0">
                                    <div class="col-12 no-found-holder brand-no-found-holder">
                                        <div class="m-auto"> Currently, no brand is selected.</div>
                                    </div>
                                    <div class="col-12 reg-list added_region_div p-0" style="display:none;margin-bottom:0px">

                                    </div>
                                </div>
                            </div>

                            <div class="row dis-slab-card mulitple-brand-collpase">
                                
                            </div>

                        </div>

                        <div class="tab-pane fade" id="step-5" role="tabpanel" aria-labelledby="step-5-tab">

                            <div class="header heading2" style="margin-top:5px!important">
                                <h2>Product <span>Target Achievement</span></h2>
                                <button id="productlist0" class="btn btn-primary productlist01 add-region-btn add-products"><i
                                        class="fa fa-plus"></i> Add Product</button>
                            </div>
                            <div class="col-12">
                                <div class="row m-0">
                                    <div class="col-12 no-found-holder brand-no-found-holder">
                                        <div class="m-auto"> Currently, no product is selected.</div>
                                    </div>
                                    <div class="col-12 reg-list added_region_div p-0" style="display:none;margin-bottom:0px">

                                    </div>
                                </div>
                            </div>
                            <div class="row dis-slab-card mulitple-brand-collpase">
                                
                            </div>
                        </div>

                        <div class="tab-pane fade" id="step-6" role="tabpanel"
                                        aria-labelledby="step-6-tab">

                                        <div class="Duration-overview mb-0">
                                            <div class="row">
                                                <div class="col-3"> <strong class="pr-10">Duration Type:</strong>
                                                    <span class="overview_duration_type">NA</span></div>
                                                <div class="col-3"> <strong class="pr-10">Strat Month:</strong> <span class="overview_duration_start">NA</span>
                                                </div>
                                                <div class="col-3"> <strong class="pr-10">End Month:</strong> <span class="overview_duration_end">NA</span></div>
                                            </div>
                                        </div>


                                        <div class="header heading2 mt-15" style="margin-top:5px!important">
                                            <h2>Criteria <span class="overview_criteria_by"></span></h2>
                                        </div>

                                        <div class="row m-0">
                                            <div class="col-12 reg-list mb-15 overview_critera">
                                            </div>
                                        </div>



                                        <div class="row dis-slab-card PT-5">
                                            <div class="col-12 ">
                                                <div type="submit" class="row topsec" data-toggle="collapse"
                                                    data-target="#collapseIncentive01" aria-expanded="false"
                                                    aria-controls="collapseIncentive01">
                                                    <div class="col-12"><strong>Overall Target Achievement </strong>
                                                        <i class="fa fa-angle-down"></i>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-12 collapse show" id="collapseIncentive01">
                                                <div class="PT-10 PB-10 overview-target-tables">
                                                    
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="header-tabs mt-15">
                                                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                                    <a class="nav-item nav-link active" id="overview-01-tab"
                                                        data-toggle="tab" href="#overview-01" role="tab"
                                                        aria-controls="overview-01" aria-selected="false">Brand Target
                                                        Achievement
                                                    </a>
                                                    <a class="nav-item nav-link" id="overview-02-tab" data-toggle="tab"
                                                        href="#overview-02" role="tab" aria-controls="overview-02"
                                                        aria-selected="false">Product Target Achievement
                                                    </a>
                                                    <div class="CL-Product">
                                                        {{-- <i class="fa fa-search"></i>
                                                        <input type="text" class="form-control comman-search" id=""
                                                            placeholder="Search Brand"> --}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <div class="tab-content" id="overview-tables">
                                                <div class="tab-pane min-h-auto fade show active" id="overview-01"
                                                    role="tabpanel" aria-labelledby="overview-01-tab">
                                                    <div class="no-found-holder overview-brand-no-found-holder" style="min-height:100px!important">
                                                        <div class="m-auto"> Currently, no brand is added.</div>
                                                    </div>
                                                    <span id="overviewBrandsList">
                                                        <div class="row list dis-slab-card overview-mulitple-brand-collpase">
                                                            
                                                        </div>
                                                        <div class="ProductPageNav text-center" style="padding-top: 0px;padding-bottom:0px;">
                                                            <ul class="justify-content-center pagination overview-brands-ul"></ul>
                                                        </div>
                                                    </span>
                                                </div>
                                                <div class="tab-pane min-h-auto fade show active" id="overview-02"
                                                    role="tabpanel" aria-labelledby="overview-02-tab">
                                                    <div class="no-found-holder overview-product-no-found-holder" style="min-height:100px!important">
                                                        <div class="m-auto"> Currently, no product is added.</div>
                                                    </div>
                                                    <span id="overviewProductsList">
                                                        <div class="row list dis-slab-card overview-mulitple-product-collpase">
                                                        </div>
                                                        <div class="ProductPageNav text-center" style="padding-top: 0px;padding-bottom:0px;">
                                                            <ul class="justify-content-center pagination overview-products-ul"></ul>
                                                        </div>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                    </div>
                </div>
                <div class="col-md-12 text-right PT-30">
                    <button disabled="" type="button" class="btn btn-primary m-0 mr-2 previous-btn" tab-id="1" style="display:none">Previous</button>
                    <button type="submit" class="btn btn-primary m-0 next-btn" tab-id="1">Save & Continue</button>
                    <button type="button" class="btn btn-primary btn-line m-0 ml-2 cancel-all-button" tab-id="6" style="display: none">Cancel</button>
                </div>

            </div>
        </div>

    </div>

    {{-- <div class="row">
    <div class="col-md-12 mb-30">
        <div class="card PB-20" id="floating-label">

            <div class="header">
                <h2>Incentive <span>Settings</span></h2>
            </div>


            <div class="header heading2" style="margin-top:5px!important">
                <h2>Region <span>List</span></h2>
                <button id="productlist0" class="btn btn-primary add-region-btn"><i class="fa fa-plus"></i> Add
                    Region</button>
            </div>
            <div class="col-12 reg-list added_region_div">

            </div>


            <div class="header heading2">
                <h2>Select <span>Month</span></h2>
            </div>


            <div class="form-wrap pb-0 PT-10">
                <div class="col-3">
                    <div class="form-group" style="height: auto">
                        <input type="text" class="form-control incentive_month" placeholder="">
                    </div>
                </div>
            </div>

            <div class="header heading2">
                <h2>Select <span>Employee Designation</span></h2>
            </div>

            <div class="row m-0">
                <div class="form-wrap PB-10 PT-10">
                    <div class="row m-0">
                        <div class="col-3 pr-0">
                            <label class="font12 mb-5">Select Designation</label>
                            <div class="form-s2">
                                <select class="form-control formselect designation_dropdown" placeholder="select Designation"
                                    style="width: 100%">
                                    <option>Select Designation</option> 
                                </select>
                            </div>
                        </div>

                        <div class="col-auto pt-28">
                            <button type="button" class="btn btn-primary btn-line clreate_incentive_slab"
                                style="letter-spacing: 1px; height: 34px; box-shadow:none">Create Incentive
                                Slabs</button>
                        </div>
                    </div>


                    <div class="row dis-slab-card dis_slab_div">
                        
                    </div>
                    
                </div>
                
            </div>
            <button class="btn btn-primary btn-line mr-15 ml-15 save_settings">Save Settings</button>
        </div>
    </div>
</div> --}}
@endsection
@push('js')
    <script>
        $('.start_month,.end_month').datepicker({
            autoclose: true,
            minViewMode: 1,
            format: 'yyyy-mm'
        });
        $('.start_month').on('change',function(){
            if($('.duration_type').val() == '2'){
                if($('.end_month').val() != ''){
                    var start_month = $('.start_month').val().split('-')[1];
                    var end_month   = $('.end_month').val().split('-')[1];
                    var difference  = parseInt(end_month) - parseInt(start_month);
                    if(difference < 2 || difference > 2){
                        $('.start_month').val('');
                        $('#notifDiv').css('background', 'red').text('Select 3 months range').fadeIn();
                        setTimeout(() => {
                            $('#notifDiv').fadeOut();
                        }, 3000);
                    }
                }
            }
        });
        $('.end_month').on('change',function(){
            if($('.duration_type').val() == '2'){
                if($('.start_month').val() != ''){
                    var start_month = $('.start_month').val().split('-')[1];
                    var end_month   = $('.end_month').val().split('-')[1];
                    var difference  = parseInt(end_month) - parseInt(start_month);
                    if(difference < 2 || difference > 2){
                        $('.end_month').val('');
                        $('#notifDiv').css('background', 'red').text('Select 3 months range').fadeIn();
                        setTimeout(() => {
                            $('#notifDiv').fadeOut();
                        }, 3000);  
                    }
                }
            }
        });
    </script>
    <script src="/js/custom/kpiincentive.js"></script>
@endpush