@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> Localities</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">Locality 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;
    }
    
    .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">Area <span> Management</span></h2>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6">
        <ol class="breadcrumb">
            <li><a href="#"><span>Area</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">
                                    <h2 class="heading">Area <span>Name</span></h2>
                                    <div class="col-3">
                                        <input type="text" class="form-control" value="{{ isset($area->area_name) ? $area->area_name : '' }}" id="areaName" placeholder="Area">
                                    </div>
                                    <div class="col-auto">
                                        <h2 class="heading">Select <span>ASM/ZSM</span></h2>
                                    </div>
                                    <div class="col-4">
                                        <div class="_PR_filter float-left">
                                            <div class="form-s2">
                                                <select class="form-control formselect" placeholder="select RSM" id="asmDD" style="width: 100%;">
                                                    <option disabled selected>Select ASM/ZSM</option>
                                                    @foreach ($employees_geo as $e)
                                                        <option {{ isset($area->asm) ? ($e->employee_id == $area->asm ? 'selected' : '') : '' }} value="{{ $e->employee_id }}"> {{ $e->employee_first_name.' '.$e->employee_last_name }} </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 p-0">
                            <div class="CataAddName">
                                <div class="form-group row m-0">
                                    <h2 class="heading">Select <span>Region</span></h2>
                                    <div class="col-4">
                                        <div class="_PR_filter float-left">
                                            <div class="form-s2">
                                                <select id="regionDD" class="form-control formselect" placeholder="select RSM" style="width: 100%;">
                                                    <option disabled selected>Select Region</option>
                                                    @foreach ($regions as $r)
                                                        <option {{ isset($area->region_id) ? ($r->id == $area->region_id ? 'selected' : '') : '' }} value="{{ $r->id }}"> {{ $r->region_name }} </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </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" id="divisionsDiv">
                    </div>
                    <div class="header addPR-head">
                        <h2>Select <span> Cities</span></h2>
                    </div>
                    <div class="col-12 citiesTblDiv">
                        <table class="table table-hover dt-responsive nowrap" id="citiesTbl" style="width:100%">
                            <thead>
                                <tr>
                                    <th>City Name</th>
                                    <th>Localities</th>
                                    <th>Assign</th>
                                    <th>ACTIONS</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col-md-12 text-center PT-15">
                    <button id="saveArea" class="btn btn-primary mr-2">Save</button>
                    <a href="/goegraphy" class="btn btn-cancel">Cancel</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection