@extends('layouts.master')
@section('data-sidebar')
    <style>
        .SideBarTable {
            padding: 0;
            margin: 0
        }

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

        .SideBarTable td,
        .SideBarTable th {
            padding: 6px;
            font-size: 12px;
            font-family: 'proximanova-light', sans-serif !important;
        }

        .SideBarTable th {
            font-weight: normal !important;
            border: none !important;
            background-color: #f6f6f6;
            font-family: proximanova-semibold, sans-serif !important;
        }

        .SideBarTable .btn-sm {
            padding: 4px 4px;
            font-size: 11px;
            text-align: center;
            text-transform: capitalize;
            line-height: 1;
            min-width: 22px;
            box-shadow: none;
        }

        .SideBarTable .sidebar-f-l-head {
            width: 60px !important;
        }

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

        .grayTopborder {
            border-top: solid 1px #e5e5e5
        }

        .assCatalogue-radio {
            margin: 5px;
            margin-bottom: 15px;
            background-color: #f6f6f6;
        }

        .RrulesHeading {
            padding: 0px 20px 10px 20px !important;
            background: transparent !important;
            border-bottom: solid 1px #e5e5e5
        }

        .pt-3 {
            padding-top: 3px !important;
        }

        .red-bg {
            border: solid 1px #f12300 !important
        }

        .retailerTable {
            padding-top: 15px;
            padding-bottom: 15px;
        }

        .retailerTable .table thead th {
            border-bottom: solid 1px #0038ba !important;
            background-color: #fff !important;
        }

        .retailerTable {
            padding: 0;
            margin: 0
        }

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

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

        .add-pr-btn {
            padding: 6px 18px;
            letter-spacing: 1px;
            font-size: 13px;
            line-height: 1;
            float: right;
            margin-right: -15px;
        }

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

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

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

        .ProListDiv .PrList_img {
            width: 33px;
            height: 33px;
            margin-right: 8px;
            border: solid 1px #e0e0e0
        }

        .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, #0038ba 0%, #0038ba 100%);
            color: #fff;
            text-align: center;
            margin: 0;
            line-height: 1;
            min-width: 74px;
            letter-spacing: 1px;
            float: right;
            border: none !important
        }

        .se_cus-type .form-control {
            border: 1px solid #eeeeee;
            background-color: #fff;
        }

        .retailerTable .table .btn-line:HOVER {
            border-color: #f12300 !important;
            color: #fff;
            background: linear-gradient(90deg, #f12300 0%, #f12300 100%);
        }

        .dis-slab-card {
            font-size: 13px;
            margin: 0;
        }

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

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

        .topsec {
            background-color: #f7f7f7;
            font-size: 13px;
            padding: 10px 0px;
            margin: 0
        }

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

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

        .dis-slab-card .add-slab-btn {
            width: 100%;
            font-size: 14px;
            /* padding: 10px */
            margin: unset !important;
        }

        .add-slab-btn {
            letter-spacing: 1px;
            border: solid 1px #003db6;
            background: linear-gradient(90deg, #ededed 0%, #ededed 100%);
            color: #282828;
            border: none;
            padding: 5px 35px;
        }

        .add-slab-btn:Hover,
        .add-slab-btn:focus {
            border: none;
        }

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

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

        .fs-optgroup-label {
            text-align: left;
        }
    </style>
    <div id="product-cl-sec">
        <a href="#" id="pl-close" class="close-btn-pl"></a>
        <div class="pro-header-text">New <span>Assignment</span></div>
        <div class="loader-sell360 sideloader">
            <div class="loader"> <span class="box-icon"></span> <span class="box-icon"></span>
                <div class="loader-img"> <img src="/images/sell-360-logo.svg" alt=""> </div>
                <span class="txt"><span></span> LOADING...</span> </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 saveAssignmentForm">
                                <div class="col-12"> 
                                    <input type="hidden" id="data-for-assignment" value="{{json_encode($data)}}">
                                    <form style="display: flex;" id="saveAssignmentForm">
                                        @csrf
                                        <input type="text" name="operation" id="operation" hidden>
                                        <input type="hidden" name="assignment_id" id="assignment_id">
                                        <div id="floating-label" class="card p-20 top_border mb-3" style="width: 100%">
                                            <h2 class="_head03">Classification <span> Criteria Details</span></h2>
                                            <div class="form-wrap p-0">
                                                <div class="row">
                                                    <div class="col-md-6 criteria_id">
                                                        <label class="font12 mb-5">Select Criteria*</label>
                                                        <div class="form-s2 mb-5">
                                                            <select name="criteria_id" id="criteria_id"
                                                                class="required_assignment form-control formselect">
                                                                <option value=""> Select Criteria
                                                                </option>
                                                                @foreach ($data['criteria'] as $criteria)
                                                                <option value="{{ $criteria->id }}">
                                                                    {{ $criteria->title }}</option>
                                                                @endforeach

                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 assignment_type">
                                                        <label class="font12 mb-5">Assignment Type*</label>
                                                        <div class="form-s2 mb-5">
                                                            <select name="assignment_type" id="assignment_type"
                                                                class="form-control formselect required_assignment">
                                                                <option value=""> Select Assignment
                                                                    Type </option>
                                                                <option value="1">Territorial Assignment</option>
                                                                <option value="2">Geographical Assignement</option>
                                                            </select>
                                                        </div>
                                                    </div> 
                                                    

                                                    <div class="col-md-6 territorial-div load-all-regions" style="display:none;">
                                                        <label class="font12 mb-5">Select Regions*</label>
                                                        <div class="form-s2 mb-5">
                                                            <select name="region_id[]" id="regions-select" multiple="multiple"
                                                                class="reports-select multi ">
                                                                <option value=""> Select Regions
                                                                </option>

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

                                                    <div class="col-md-6 territorial-div load-all-areas" style="display:none;">
                                                        <label class="font12 mb-5">Select Areas*</label>
                                                        <div class="form-s2 mb-5">
                                                            <select name="area_id[]" id="areas-select"
                                                                class="reports-select multi" multiple="multiple">

                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 territorial-div load-all-territory" style="display:none;">
                                                        <label class="font12 mb-5">Select Territories*</label>
                                                        <div class="form-s2 mb-5">
                                                            <select name="territory_id[]" id="territory-select"
                                                                class="reports-select multi" multiple="multiple">

                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 geo-div load-all-cities" style="display:none;">
                                                        <label class="font12 mb-5">Select Cities*</label>
                                                        <div class="form-s2 mb-5">
                                                            <select name="city_id[]" id="cities-select"
                                                                class="reports-select multi " multiple="multiple">
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 geo-div load-geo load-all-localities" style="display:none;">
                                                        <label class="font12 mb-5">Select Localities*</label>
                                                        <div class="form-s2 mb-5">
                                                            <select name="locality_id[]" id="locality-select"
                                                                class="reports-select multi" multiple="multiple">

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

                                                    <div class="col-md-6 geo-div load-all-neighbourhood" style="display:none;">
                                                        <label class="font12 mb-5">Select Neighborhoods*</label>
                                                        <div class="form-s2 mb-5">
                                                            <select name="neighbourhood_id[]" id="neighbourhood-select"
                                                                class="reports-select multi" multiple="multiple"> 
                                                            </select>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="_cl-bottom">
            <button type="button" class="btn btn-primary mr-2" id="saveVendor">Save</button>
            <button id="pl-close" type="button" class="btn btn-cancel mr-2" id="cancelVendor">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">Classification Criteria<span> Assignment</span></h2>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6">
            <ol class="breadcrumb">
                <li><a href="#"><span>Assignment</span></a></li>
                <li><span>Active</span></li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="header">
                    <a class="btn add_button openDataSidebarForAddingAssignment"><i class="fa fa-plus"></i> New Assignment</a>
                    <h2>Criteria Assignments List</h2>
                </div>
                <div class="loader-sell360 tblLoader">
                    <div class="loader"> <span class="box-icon"></span> <span class="box-icon"></span>
                        <div class="loader-img"> <img src="/images/sell-360-logo.svg" alt=""> </div>
                        <span class="txt"><span></span> LOADING...</span> </div>
                    </div>
                <div class="body body_Vendor" style="display: none">
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
     
 
@endpush