@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> 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"
                    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>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</button>
        <button id="pl-close" type="button" class="btn btn-cancel mr-2">Cancel</button>
    </div>
</div>
@endsection


@section('content')
<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: 14px;
        padding: 5px 12px;
        float: right;
        letter-spacing: 1px;
    }


    .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 #fff;
        border-radius: 0
    }

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

    .reg-list .alert-color {
        display: inline-block;
        padding: 8px 25px 5px 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
    }

</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="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="productlist01" 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 class="alert fade show alert-color" role="alert">
                    Region Name Here
                    <button type="button" class="close alert_close" data-dismiss="alert" aria-label="Close"> <span
                            aria-hidden="true">×</span> </button>
                </div>

                <div class="alert fade show alert-color" role="alert">
                    Region Name Here...
                    <button type="button" class="close alert_close" data-dismiss="alert" aria-label="Close"> <span
                            aria-hidden="true">×</span> </button>
                </div>

                <div class="alert fade show alert-color" role="alert">
                    Lahore
                    <button type="button" class="close alert_close" data-dismiss="alert" aria-label="Close"> <span
                            aria-hidden="true">×</span> </button>
                </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