@extends('layouts.app')

@section('content')

<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
    <!-- BEGIN CONTENT BODY -->
    <div class="top_bar page-content">
        <div class="top_status_bar">
            <div class="progress_bar"></div>
        </div>
        <div class="breadcrumbs">
            <ul>
                <li>
                    <a href="{{url('admin/settings')}}" class="">
                        Settings
                    </a>
                </li>
                <li>
                    <a href="#" class="breadcrumb_link">
                        City & Area
                    </a>
                </li>
            </ul>
            <button class="btn btn-large pull-right help theme_btn help_btn">?</button>
        </div>
    </div>
    <div class="page-content">
        <!-- BEGIN PAGE HEADER-->
        <!-- BEGIN PAGE BAR -->
        <div class="row">
            <div class="col-md-12">
                <div class="portlet setting_landing">
                    <div class="portlet-title" style="border-bottom: 0">
                        <div class="caption">
                            <h2>City & Area
                                <span>Setup City & Area as required to set up your organization structure</span>
                            </h2>
                        </div>
                    </div>
                    <hr>
                    <!-- MAIN CONTENT START -->
                    <div class="portlet-body">
                        <div class="settings">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="col-md-4">
                                        <span class="main_title">Add City &amp; Area</span>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="col-md-4">
                                        <span class="sub_heading">What all are the Cities in your business?</span>
                                        <span class="sub_heading">You can set the Area based on the City.</span>
                                    </div>
                                    <div class="col-md-1"></div>
                                    <div class="col-md-7">
                                        <div class="row">
                                            <div class="col-md-12 inner_row">
                                                <div class="input-group">
                                                    <input class="form-control new_department" value="" id="new_department" type="text" placeholder="Enter city/emirates names seperated by comma to add multiple">
                                                    <span class="input-group-btn">
                                                        <button class="btn default save_department" type="button" style="margin: 0">
                                                            <i class="fa fa-plus"></i>
                                                        </button>
                                                    </span>
                                                </div>
                                                <p class="text-danger department hidden"></p>
                                            </div>
                                        </div>
                                        <div class="products box add_dep_desWrap">
                                            <div class="header_tbl">
                                                <div class="row">
                                                    
                                                    <div class="col-md-12">
                                                        <div class="col-md-1 inner_row">
                                                            <div class=" del_header"></div>
                                                        </div>
                                                        <div class="col-md-3 row_header">
                                                            City/Emirates
                                                        </div>
                                                        <div class="col-md-3 row_header ">
                                                            Area
                                                        </div>

                                                        <div class="col-md-6 row_header b4_del_header">
                                                            Add Area
                                                        </div>
                                                        
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row_wrap">
                                                <div class="row_inner_wrap">
                                                    <!--<input type="hidden" value="">-->
                                                    @if(!empty($data["selected_department"]))
                                                    @foreach($data["selected_department"] as $selected_department)

                                                    <div class="row">
                                                        <div class="col-md-12">
                                                        <div class="col-md-1 inner_row">
                                                            <div class=" del_icon">
                                                                <i class="fa fa-trash-o del" aria-hidden="true" num-id="0"></i>
                                                            </div>
                                                        </div>
                                                            <div class="col-md-3 inner_row">
                                                                <input type="hidden" class="department_id" value="{{$selected_department["id"]}}">
                                                                <input class="form-control edit_department" id="edit_department" value="{{$selected_department["title"]}}" type="text" placeholder="" readonly>
                                                                <i class="fa fa-check edit_source edit_field edit_field_title"></i>
                                                            </div>
                                                            <div class="col-md-3 inner_row">
                                                                <select class="select" id="edit_designation">
                                                                    <option></option>
                                                                    @if(!empty($selected_department["department_designation"]))
                                                                    @foreach($selected_department["department_designation"] as $designation)
                                                                    @if(isset($designation))
                                                                    <option value="{{$designation->id}}" desname ="{{$designation->name}}">{{$designation->name}}</option>
                                                                    @endif
                                                                    @endforeach
                                                                    @endif
                                                                </select>
                                                            </div>
                                                            <div class="col-md-5 inner_row b4_del_header">
                                                                <div class="input-group">
                                                                    <input class="form-control new_designation" id="new_designation" value="" type="text" placeholder="Enter area seperated by comma">
                                                                    <p class="text-danger hidden"></p>
                                                                    <span class="input-group-btn">
                                                                        <button class="btn default" type="button" style="margin: 0">
                                                                            <i class="fa fa-plus save_designation"></i>
                                                                            <i class="fa fa-check edit_row" style="display: none;"></i>
                                                                        </button>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                            
                                                        </div>
                                                    </div>
                                                    @endforeach
                                                    @endif
                                                </div>
                                                <div class="row_inner_wrap">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <div class="col-md-1 inner_row">
                                                                <div class=" del_icon">
                                                                    <i class="fa fa-trash-o del" aria-hidden="true"></i>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-3 inner_row">
                                                                <select class="select2 department_id">
                                                                    <option></option>
                                                                    @if(!empty($data["unselected_department"]))
                                                                    @foreach($data["unselected_department"] as $unselected_department)
                                                                    <option value="{{$unselected_department["id"]}}">{{$unselected_department["title"]}}</option>
                                                                    @endforeach
                                                                    @endif
                                                                </select>
                                                            </div>
                                                            <div class="col-md-3 inner_row">
                                                                <select class="select">
                                                                    <option></option>
                                                                </select>
                                                            </div>
                                                            <div class="col-md-6 inner_row b4_del_header">
                                                                <div class="input-group">
                                                                    <input class="form-control new_designation" value="" type="text" placeholder="Enter designations seperated by comma">
                                                                    <span class="input-group-btn">
                                                                        <button class="btn default save_designation" type="button" style="margin: 0">
                                                                            <i class="fa fa-plus"></i>
                                                                        </button>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                            
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-md-8"></div>
                                        <div class="col-md-4">
                                            <a href="{{url('admin/settings')}}" class="btn theme_btn_round cancel float_btn">Cancel</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- MAIN CONTENT END -->

                </div>
                <!-- End: life time stats -->
            </div>
        </div>
    </div>
</div>


<!-- //SWEET_ALERT START// -->

<div id="sweetalert_wrap_department" class="sweet_alert_wrap">
    <!-- Sweet alert -->
    <div class="sweet-alert showSweetAlert" data-custom-class="" data-has-cancel-button="true"
        data-has-confirm-button="true" data-allow-outside-click="false" data-has-done-function="true"
        data-animation="pop" data-timer="null">
        <div class="sa-icon sa-warning pulseWarning" style="display: block;">
            <span class="sa-body pulseWarningIns"></span>
            <span class="sa-dot pulseWarningIns"></span>
        </div>
        <h2>Do you want to delete state & city?</h2>
        <div class="sa-button-container">
            <button class="cancel" tabindex="2">Cancel</button>
            <div class="sa-confirm-button-container">
                <button class="confirm" tabindex="1">Confirm</button>
            </div>
        </div>
    </div>
</div>
<!-- //SWEET_ALERT END// -->

@endsection('content')

@section('admin_css')
<link href="{{asset('assets/global/plugins/select2/css/select2.min.css')}}" rel="stylesheet" type="text/css"/>
<link href="{{asset('assets/global/plugins/select2/css/select2-bootstrap.min.css')}}" rel="stylesheet" type="text/css"/>
<link href="{{asset('assets/custom/settings.css')}}" rel="stylesheet" type="text/css"/>
<link href="{{asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')}}" rel="stylesheet" type="text/css"/>
<link href="{{asset('css/sweetalert.css')}}" rel="stylesheet" type="text/css" />
<style type="text/css">
    .del {
        visibility: visible;
    }
    .selectMsg .col-md-12 {
        padding: 0;
    }
    .select2 .select2-selection.select2-selection--single{
        height: 33px !important;
    }
    .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b {
        left: 18px;
    }
    .select2-container--bootstrap .select2-selection--single .select2-selection__arrow {
        padding: 0 16px;
        border: 1px solid #c6c8cc;
        right: 0;
        border-radius: 0 4px 4px 0;
        background: #ececec;
    }
    .select2-container--bootstrap .select2-selection__clear {
        display: none;
    }
    a.cancel {
        color:white !important;
        background: #b7b9bb;
        float: none;
        margin-left: 375px !important;
    }
    .form-control {
        height: 34px !important;
    }
    .b4_del_header {
        width: 47%;
    }
    .del_icon, .del_header {
        width: 4%;
    }
    .row_inner_wrap:last-child .del_icon {
        display: none;
    }
    .breadcrumbs li:first-child a{
        color: #00919e;
    }
    .form-control[disabled], fieldset[disabled] .form-control {
        color: #bdbdbd;
    }

    .form-control, .select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
        font-weight: 500;
    }

    .btn.default{
        background-color: #ececec !important;
        border-radius: 0px 5px 5px 0px;
    }

    .row {
        margin-left: -5px;
        margin-right: -5px;
    }
    .add_dep_desWrap {
        margin-bottom: 15px;
    }

    body .actions_dropdown {
        z-index: 999;
    }

    .sub_heading {
        width: 80%;
    }

    .del_icon{
        width: 3% !important;
        left: -3px;
        background: none;
        border:none;
        font-size: 18px;
    }

    .col-md-1{
        width: 3% !important;
    }

    .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b {
        left: 18px;
        border-color: black transparent transparent transparent !important;
    }

    .select2-container--bootstrap .select2-selection--single .select2-selection__arrow {
        padding: 0 16px;
        border: 1px solid #c6c8cc;
        right: 0;
        border-radius: 0 4px 4px 0;
        background: #ececec;
    }

    .select2-container--bootstrap.select2-container--open .select2-selection__arrow b {
        border-color: transparent transparent black !important;
    }
</style>

@stop

@section('admin_js')
<script src="{{asset('assets/global/plugins/select2/js/select2.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}" type="text/javascript"></script>
<script src="{{asset('js/general.js')}}"></script>
@include('admin.js.city_area')
<script>

</script>
@stop