@extends('layouts.master')
@section('data-sidebar')
<div id="product-cl-sec">
    <a href="#" id="pl-close" class="close-btn-pl"></a>
    <div class="pro-header-text">Select <span> Neighbourhood</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" id="searchLocalitySidebar" placeholder="Search">
                </div>
            </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" id="localitiesListing" width="100%">
                                        <thead>
                                            <tr>
                                                <th class="PB-10">Neighbourhood Name</th>
                                                <th class="PB-10" style="text-align:right">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="_cl-bottom">
        <button id="pl-close" type="submit" class="btn btn-primary mr-2">Save</button>
    </div>
</div>
@endsection

@section('content')
<style>
    .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
    }
    
    .se_cus-type .form-control,
    .se_cus-type .form-s2 .select2-container .select2-selection--single {
        border: 1px solid #eeeeee;
        background-color: #fff;
    }
    
    .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
    }
    
    .CataAddName {
        padding: 10px 15px 10px 15px;
        border-bottom: solid 1px #eae9e9
    }
    
    .add-all-btn {
        font-size: 13px;
    }
    
    .ProList-div table td {
        padding-left: 10px
    }
    
    .ProList-div td {
        font-size: 14px;
    }
    
    .btn-default {
        letter-spacing: 1px
    }
    
    .all-city-btn {
        position: relative;
    }
    
    .CataAddName {
        padding: 10px 15px 10px 15px;
        border-bottom: solid 1px #eae9e9
    }
    
    .add-all-btn {
        font-size: 13px;
    }
    
    .ProList-div table td {
        padding-left: 10px
    }
    
    .RSM-div {
        border-top: solid 1px #eae9e9;
        margin: 0;
        margin-top: 20px;
        padding-top: 20px;
    }
    
    .alert-color {
        color: #383d41;
        background-color: #f4f4f4;
        border-color: #f0f0f1;
        font-size: 13px;
        padding: 5px 25px 5px 8px;
        margin-bottom: 10px;
    }
    
    .alert-color .alert_close {
        top: 4px;
    }
    
    .bg-none {
        background-color: transparent!important;
        background: none
    }
    
    .heading {
        font-size: 16px;
        padding-top: 8px;
    }
    
    .heading span {
        font-family: 'proximanova-light', sans-serif !important;
        font-weight: normal;
    }
    
    .ProListHeight {
        height: 565px;
    }
    
    .CataAddName .form-s2 .select2-container .select2-selection--single {
        height: 35px !important;
        border: 1px solid #eae9e9;
        background-color: #ffffff;
    }
    .CataAddName .fs-label-wrap {
        position: relative;
        background-color: #ffffff;
        border: 1px solid #eae9e9;
        cursor: default;
    }
    
    .addPR-head {
        background: none!important
    }
    
    .ProList-div td {
        font-size: 14px;
    }
</style>
<div class="row mt-2 mb-3">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <h2 class="_head01">Criteria <span> Assignment</span></h2>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6">
        <ol class="breadcrumb">
            <li><a href="#"><span>Criteria Assignment</span></a></li>
            <li><span>Add</span></li>
        </ol>
    </div>
</div>
<div class="row">
    <div class="col-md-12 mb-30">
        <div class="card PB-20">
            <div class="row m-0">
                <div class="col-12 p-0">
                    <div class="row m-0">
                        <div class="col-md-12 p-0">
                            <div class="CataAddName">
                                <div class="form-group row m-0">
                                    <input type="hidden" id="edit_region_id" value="{{@$region_id}}">
                                    <div class="col-3 PB-10">
                                        <div class="form-s2">
                                            <label class="font12 mb-5">Criteria</label>
                                            <select class="form-control formselect criteria_type assignment-required" placeholder="select Criteria" id="asmDD" style="width: 100%;">
                                                <option selected disabled value="0">Select Criteria</option>
                                                @foreach ($profile_details as $data)
                                                    <option value="{{$data->id}}" {{$data->id == $criteria_id ? 'Selected' : ''}}> {{$data->title}} </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-3 PB-10 pl-0">
                                        <div class="form-s2">
                                            <label class="font12 mb-5">Assignment Type</label>
                                            <select class="form-control formselect assignment_type assignment-required" id="assignment_type" placeholder="select Type" style="width: 100%">
                                                <option selected disabled value="0">Select Type</option>
                                                <option value="1" {{$page_id == 1 ? 'selected' : ''}}>Geographical</option>
                                                <option value="2" {{$page_id == 2 ? 'selected' : ''}}>Territorial</option>
                                            </select>
                                        </div>
                                    </div>
                                    @if($page_id == 1)
                                    <div class="col-3 PB-10 pl-0 city_div">
                                        <div class="form-s2">
                                            <label class="font12 mb-5">City</label>
                                            <select class="form-control formselect" placeholder="select City" id="city_id" style="width: 100%;">
                                                <option disabled selected value="0">Select City</option>
                                                @foreach ($city as $data)
                                                    <option value="{{$data->id}}" {{$data->id == $city_id ? 'selected' : ''}} city-name="{{$data->name}}"> {{$data->name}} </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    @endif
                                    <div class="col-3 PB-10 pl-0 city_div" style="display: none">
                                        <form id="segment_form">
                                        <div class="form-s2">
                                            <label class="font12 mb-5">Segment</label>
                                            <select multiple="multiple" class="reports-select" placeholder="Select Segment" name="segment[]" required {{--onchange="loadProductsByBrandForReport($(this).val())"--}}>
                                                <option selected value="">Select Segment</option>
                                                @foreach ($segments as $segment)    
                                                    <option value="{{$segment->id}}" segment-name="{{$segment->name}}"> {{$segment->name}} </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        </form>
                                    </div>    
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="header addPR-head">
                        <h2>Select <span> Neighbourhoods</span></h2>
                    </div>
                    <div class="col-12 localitytblDiv">
                        
                    </div>
                </div>
                <div class="col-md-12 text-center PT-15">
                    <button id="saveAssignment" class="btn btn-primary mr-2">Save</button>
                    <a href="/goegraphy" class="btn btn-cancel">Cancel</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
    {{--    <script src="/js/fSelect.js"></script>--}}
    <script>
        (function($) {
            $(function() {
                window.fs_test = $('.reports-select').fSelect();
            });
        })(jQuery);
    </script>
@endsection
@push('scripts')
    <script src="/modules/retailers-profile/js/retailer_profile.js"></script>
@endpush