@extends('layouts.master')
@section('data-sidebar')
@endsection

@section('content')
<div class="row mt-2 mb-3">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <h2 class="_head01">Region <span> Management</span></h2>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6">
        <ol class="breadcrumb">
            <li><a href="#"><span>Region</span></a></li>
            <li><span>Add</span></li>
        </ol>
    </div>
</div>
<style>
    .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: 9px;
    }
    
    .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;
    }
    
    .addPR-head {
        background: none!important
    }
    
    .ProList-div td {
        font-size: 14px;
    }
    
    .all-city-btn {
        font-size: 12px;
        /* background: #959595; */
        position: absolute;
        /* border-color: #7d7d7d; */
        padding: 3px 12px;
        top: -3px;
        right: 15px;
    }
</style>
<div class="row">
    <div class="col-md-12 mb-30">
        <div class="card PB-20">
            <div class="row m-0">
                <div class="col-8 p-0">
                    <div class="row m-0">
                        <div class="col-md-12 p-0">
                            <div class="CataAddName">
                                <div class="form-group row m-0">
                                    <h2 class="heading">Region <span>Name*</span></h2>
                                    <div class="col-4">
                                    <input type="text" class="form-control" value="{{ isset($region->region_name) ? $region->region_name : '' }}" id="regionName" placeholder="Region">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 p-0">
                        <div class="CataAddName bg-none">
                            <div class="row">
                                <div class="col-3">
                                    <h2 class="heading">Select <span>RSM*</span></h2>
                                </div>
                                <div class="col-4">
                                    <div class="_PR_filter float-left">
                                        <div class="form-s2">
                                            <select id="rsmDD" class="form-control formselect" placeholder="select RSM" style="width: 100%;">
                                            <option disabled selected>Select RSM</option>
                                            @foreach ($employees_geo as $e)
                                            <option {{ isset($region->rsm) ? ($e->employee_id == $region->rsm ? 'selected' : '') : '' }} value="{{ $e->employee_id }}"> {{ $e->employee_first_name .' '. $e->employee_last_name }} </option>
                                            @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="header addPR-head">
                        <div class="row">
                            <div class="col-12">
                                <h2>Select <span> Division*</span></h2>
                            </div>
                        </div>
                    </div>
                    <div class="row m-0">
                        @foreach ($divisions as $k => $d)
                        <div class="col-auto pt-5">
                            <div class="custom-control custom-checkbox mr-sm-2">
                                <input type="checkbox" name="divisionsCb[]" class="custom-control-input" value="{{ $d->id }}" id="d00{{$k}}"
                                {{ isset($region->divisions) ? (in_array($d->id, explode(',', $region->divisions)) ? 'checked' : '') : '' }}
                                >
                                <label class="custom-control-label" for="d00{{$k}}">{{ $d->division }}</label>
                            </div>
                        </div>
                        @endforeach
                        <div class="col-12">
                            <hr>
                        </div>
                    </div>
                    <div class="header addPR-head CataAddName mb-10">
                        <div class="row">
                            <div class="col-3">
                                <h2>Select <span> Province</span></h2>
                            </div>
                            <div class="col-4">
                                <div class="form-s2">
                                    <select class="form-control formselect" id="provinceDD" placeholder="select Type" style="width: 100%;">
                                        <option selected disabled>Select Province</option>
                                        @foreach ($provinces as $p)
                                    <option value="{{ $p->id }}">{{ $p->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-auto pl-0">
                                <button type="submit" class="btn btn-primary add-all-btn" id="addProvinceCities">Add</button>
                            </div>
                            <div class="col-12 PT-15">
                                <div class="row" id="selectedProvinces">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-4 p-0">
                    <div class="_selectProList ProListHeight">
                        <div class="header ProListHD">
                            <div class="row">
                                <div class="col-12">
                                    <h2 class="w-100">Select <span> Cities</span>
                                    </h2><button type="button" class="btn btn-primary all-city-btn" id="selectAllCities">Select All</button>
                                </div>
                                <div class="col-12">
                                    <div class="APS-list"><i class="fa fa-search"></i>
                                        <input type="text" class="form-control" id="searchAddedCities" placeholder="Search">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="ProList-div">
                            <div id="tblLoader" style="display:none; text-align: center; line-height: 5; font-weight: bold;">Loading..</div>
                            <table class="table table-hover dt-responsive nowrap" id="assignmentsListingTbl" style="width:100%">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-12 text-right PT-15">
                        <button type="submit" class="btn btn-primary mr-2" id="saveRegion">Save</button>
                        <a href="/goegraphy" class="btn btn-cancel">Cancel</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection