@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: 3px;
        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;
    }

</style>
@endsection
<div class="row mt-2 mb-3">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <h2 class="_head01">Primary Trade Offer <span> Management</span></h2>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6">
        <ol class="breadcrumb">
            <li><a><span>Trade Offer</span></a></li>
            <li><span>Assign</span></li>
        </ol>
    </div>
</div>
<div class="row">
    <div class="col-md-12 mb-30">
        <div class="card PB-20">
            <div class="header">
                <h2>Primary Assign <span>Trade Offer</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 load-all-primary-regions">
                            <label class="control-label mb-5">Select Region *</label>
                            <div class="form-s2">
                                <select class="reports-select multi multi-region required" multiple="multiple" placeholder="Select Region"
                                id="primary-regions-select" name="region[]">
                                <option value="0" class="all-regions-checked">All Regions</option>
                                @foreach ($regions as $region)
                                    <option class="primary-slab-regions" value="{{$region->id}}" {{@$region->is_added == true ? 'selected' : ''}}>{{$region->region_name}}</option>
                                @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-3 load-all-primary-areas">
                            <label class="control-label mb-5">Select Area *</label>
                            <div class="form-s2">
                                <select class="reports-select multi required" multiple="multiple" placeholder="Select Area"
                                    id="primary-areas-select" name="areas[]">
                                    {{-- <option>Select Area </option> --}}
                                </select>
                            </div>
                        </div>
                        <div class="col-3 load-all-primary-territory">
                            <label class="control-label mb-5">Select Territory *</label>
                            <div class="form-s2">
                                <select class="reports-select multi required" multiple="multiple" placeholder="Select Territory"
                                    id="primary-territory-select" name="territories[]">
                                    {{-- <option>Select Territory </option> --}}
                                </select>
                            </div>
                        </div>
                        {{-- <div class="col pr-0">
                            <label class="font12 mb-5">Region</label>
                            <div class="form-s2">
                                <select class="form-control formselect" onchange="fetchAllRegionAreas(this.value)" id="region_id" placeholder="select Region"
                                    style="width: 100%">
                                    <option selected disabled>Select Region</option>
                                    @foreach($regions as $row)
                                        <option  value="{{$row->id}}">{{$row->region_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col pr-0">
                            <label class="font12 mb-5">Area</label>
                            <div class="form-s2">
                                <select class="form-control formselect" id="area_id"  placeholder="select Area"
                                    style="width: 100%">
                                    <option selected disabled>Select Area/Zone</option>
                                </select>
                            </div>
                        </div> --}}
                        <div class="col-auto pt-28">
                            <button type="button" id="assignTerritory" class="btn btn-primary">Add</button>
                        </div>
                    </div>
                </div>
            </div>
            <hr>
            <div class="col-md-12" id="addedTerritories">
            </div>
            <div class="col-md-12 text-center PT-20">
                <button type="button" id="SavePrimarySchemeAssignment" class="btn btn-primary mr-2">Save</button>
                <a href="/ListSchemes" class="btn btn-cancel">Cancel</a>
            </div>
        </div>
    </div>
</div>
@endsection