@extends('member-new')

@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">
    <!-- END: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/assets/plugins/bower_components/multiselect/css/bootstrap-multiselect.css" rel="stylesheet"/>

@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">{{trans('master/master.area_mapping')}}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">{{trans('master/master.home')}}</a>
                    </li>
                    <li class="breadcrumb-item"><a href="/member/{{$alias}}/area-mapping">{{trans('master/master.area_mapping')}}</a>
                    </li>
                    <li class="breadcrumb-item active">
                    @if(isset($area_mapping) && ($area_mapping->id))
                        {{trans('master/master.edit_area_mapping')}}
                    @else
                        {{trans('master/master.add_new_area_mapping')}}
                    @endif
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
<!-- Basic multiple Column Form section start -->
{!! Form::model($area_mapping, ['method' => isset($area_mapping) && $area_mapping->id ? 'put' : 'post', 'files' => 'true']) !!}
    <section class="vertical-wizard">
        @if (isset($status))
        <!--Closable Alerts start -->
        <div class="row">
            <div class="col-md-12">
                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                    <!-- <div class="alert-heading">{{ $status['header'] }}</div> -->
                    <div class="alert-body">
                        @foreach ($status['messages'] as $m)
                            {{$m}}<br>
                        @endforeach
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>
        </div>
        <!--Closable Alerts end -->
        @endif
        <div class="bs-stepper vertical vertical-wizard-example">
            <div class="bs-stepper-header">
                <div class="step" data-target="#personal-info-vertical" role="tab" id="personal-info-vertical-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">1</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">{{trans('master/master.area_mapping_details')}}</span>
                            <span class="bs-stepper-subtitle">{{trans('master/master.add_area_mapping_details')}}</span>
                        </span>
                    </button>
                </div>
                <div class="step" data-target="#shift-details-vertical" role="tab" id="shift-details-vertical-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">2</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">{{trans('master/master.shift_details')}}</span>
                            <span class="bs-stepper-subtitle">{{trans('master/master.add_shift_details')}}</span>
                        </span>
                    </button>
                </div>
                <div class="step" data-target="#employee-detail" role="tab" id="employee-detail-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">3</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">{{trans('master/master.employee_detail')}}</span>
                            <span class="bs-stepper-subtitle">{{trans('master/master.add_employee_detail')}}</span>
                        </span>
                    </button>
                </div>
            </div>
            <div class="bs-stepper-content">
                <div id="personal-info-vertical" class="content position-relative" role="tabpanel" aria-labelledby="personal-info-vertical-trigger" style="height: 470px">
                    <div class="content-header">
                        <h5 class="mb-0">{{trans('master/master.area_mapping_details')}}</h5>
                        <small class="text-muted">{{trans('master/master.enter_area_mapping_details')}}</small>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-1">
                            <label class="form-label">{{trans('master/master.area')}} <span class="mendatory-field text-danger">*</span></label>
                            @if(isset($areas) && ($area_mapping->id))
                                <select class="form-control select2" id="area_id" name="area_id" onchange="getSubLocation(this.value)" disabled >
                            @else
                                <select class="form-control select2" id="area_id" name="area_id" onchange="getSubLocation(this.value)">
                            @endif
                                <!-- <option value="">Select Area</option> -->
                                @foreach($areas as $area)
                                    <option value="{{$area->id}}" @if((isset($area_mapping) && ($area->id == $area_mapping->area_id)) || (old('area_id') == $area->id )) selected @endif>
                                        {{$area->name}}
                                    </option>
                                @endforeach
                            </select>
                            {!! $errors->first('area_id', '<label class="error" for="area_id">:message</label>')!!}
                        </div>

                        <div class="col-md-6 mb-1">
                            <label class="form-label">{{trans('master/master.parent_area')}} <span class="mendatory-field text-danger">*</span></label>
                            @if(isset($areas) && ($area_mapping->id))
                            <div class= "form-control" id="parent_id" style = "height:36px;"></div>
                            @else
                                <input type="hidden" name="" id="" >
                                <div class= "form-control" id="parent_id" value = 'parent_id' style = "height:36px;"></div>
                            @endif
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-1">
                            <label class="form-label">{{trans('master/master.sub_location')}}</label>
                            @if(isset($areas) && ($area_mapping->id))
                            <div class= "form-control" id="sublocation_name" style = "height:36px;"></div>
                            @else
                                <input type="hidden" name="sublocation_id" id="sublocation_id" >
                                <div class= "form-control" id="sublocation_name" value = 'sublocation_name' style = "height:36px;"></div>
                            @endif
                        </div>
                        
                        <div class="col-md-6 mb-1">
                            <label class="form-label">{{trans('master/master.location')}}</label>
                            @if(isset($area) && ($area_mapping->id))
                            <div class= "form-control" id="location_name" style = "height:36px;"></div>
                            @else
                                <input type="hidden" name="location_id" id="location_id" >
                                <div class= "form-control" id="location_name" value = 'location_name' style = "height:36px;"></div>
                            @endif
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('from_date') ? 'has-error' : '' }}}">
                                <label class="form-label" for="from_date">{{trans('master/master.from_date')}} <span class="mendatory-field text-danger">*</span></label>
                                @if(isset($areas) && ($area_mapping->id))
                                    {!! Form::text('from_date',date('d/m/Y', strtotime($fromDate)),['class' => 'form-control', 'id' => 'from_date','disabled'=> 'true']) !!}
                                @else
                                    {!! Form::date('from_date',date('Y-m-d', strtotime($fromDate)),['class' => 'form-control', 'id' => 'from_date']) !!}
                                @endif
                                {!! $errors->first('from_date', '<label class="error" for="from_date">:message</label>')!!}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('to_date') ? 'has-error' : '' }}}">
                                <label class="form-label" for="to_date">{{trans('master/master.to_date')}} <span class="mendatory-field text-danger">*</span></label>
                                {!! Form::date('to_date', isset($area_mapping->to_date) ? date('Y-m-d', strtotime($area_mapping->to_date)) : date('Y-m-d', strtotime($toDate)),['class' => 'form-control', 'id' => 'to_date']) !!}
                                {!! $errors->first('to_date', '<label class="error" for="to_date">:message</label>')!!}
                            </div>
                        </div>
                    </div>
                    <div class="content-footer position-absolute bottom-0 col-md-12">
                        <div class="d-flex justify-content-between content-footer">
                            <button type="button" class="btn btn-outline-secondary btn-prev" disabled>
                                <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                <span class="align-middle d-sm-inline-block d-none">{{trans('common/common.previous')}}</span>
                            </button>
                            <button type="button" class="btn btn-primary btn-next">
                                <span class="align-middle d-sm-inline-block d-none">{{trans('common/common.next')}}</span>
                                <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div id="shift-details-vertical" class="content position-relative" role="tabpanel" aria-labelledby="personal-info-vertical-trigger" style="height: 470px">
                    <div class="content-header">
                        <h5 class="mb-0">{{trans('master/master.shift_details')}}</h5>
                        <small>{{trans('master/master.enter_shift_details')}}</small>
                    </div>
                    <div class="row">
                        <div class="mb-1 col-md-6">
                            <label class="form-label" for="shift_id" class="required">{{trans('master/master.shift')}} <span class="mendatory-field text-danger">*</span></label>
                            <select class="form-control select2 {{{ $errors->has('shift_id') ? 'error' : '' }}}" id="shift_id" name="shift_id" onchange="getShiftDetails(this.value)">
                                <!-- <option value="">Select Shift</option> -->
                                @foreach($shifts as $shift)
                                    <option value="{{$shift->id}}"  @if(isset($shift) && ($area_mapping->shift_id == $shift->id) || (old('shift_id') == $shift->id)) selected @endif>{{$shift->name}}</option>
                                @endforeach
                            </select>
                            {!! $errors->first('shift_id', '<label id="basic-default-name-error" for="shift_id" class="error">:message</label>')!!}
                        </div>
                    </div>
                    <div class="row">
                        <div class="mb-1 col-md-6">
                            <label class="form-label" for="start_time" class="required">{{trans('master/master.start_time')}}</label>
                            @if(isset($areas) && ($area_mapping->id))
                            <div class= "form-control" id="start_time" style = "height:36px;"></div>
                            @else
                                <input type="hidden" name="" id="" >
                                <div class= "form-control" id="start_time" value = 'start_time' style = "height:36px;"></div>
                            @endif
                        </div>
                        <div class="mb-1 col-md-6">
                            <label class="form-label" for="end_time" class="required">{{trans('master/master.end_time')}}</label>
                            @if(isset($areas) && ($area_mapping->id))
                            <div class= "form-control" id="end_time" style = "height:36px;"></div>
                            @else
                                <input type="hidden" name="" id="" >
                                <div class= "form-control" id="end_time" value = 'end_time' style = "height:36px;"></div>
                            @endif
                        </div>
                    </div>
                    <div class="content-footer position-absolute bottom-0 col-md-12">
                        <div class="d-flex justify-content-between content-footer">
                            <button type="button" class="btn btn-outline-secondary btn-prev">
                                <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                <span class="align-middle d-sm-inline-block d-none">{{trans('common/common.previous')}}</span>
                            </button>
                            <button type="button" class="btn btn-primary btn-next">
                                <span class="align-middle d-sm-inline-block d-none">{{trans('common/common.next')}}</span>
                                <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div id="employee-detail" class="content position-relative" role="tabpanel" aria-labelledby="employee-detail-trigger" style="min-height: 470px">
                    <div class="content-header">
                        <h5 class="mb-0">{{trans('master/master.employee_detail')}}</h5>
                        <small>{{trans('master/master.enter_employee_detail')}}</small>
                    </div>
                    @if(isset($area) && ($area_mapping->id))
                    <div class="row">
                        <div class="col-md-6">
                            <a href="/member/{{$alias}}/area-mapping/{{$areaId}}/addEmployee"><button type="button" class="btn btn-primary" style="line-height:15px;"><i class="fa fa-plus" aria-hidden="true"></i> Add Employee</button></a>
                        </div>
                        <!-- Column Search -->
                        <div class="row mt-2 mb-4">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-datatable">
                                        <table class="table table-responsive">
                                            <thead>
                                                <th>{{trans('common/common.id')}}</th>
                                                <th>{{trans('master/master.name')}}</th>
                                                <th>{{trans('master/master.employee_code')}}</th>
                                                <th>{{trans('master/master.employee_type')}}</th>
                                                <th>{{trans('master/master.actions')}}</th>
                                            </thead>
                                            <tbody id="employee_records">

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/ Column Search -->
                    </div>
                    @else
                    <div class="row">
                        <div class="col-md-6 mb-1 {{{ $errors->has('type') ? 'has-error' : '' }}}">
                            <label class="form-label" for="type">{{ trans('master/master.type') }}</label><span class="mendatory-field text-danger">*</span>
                            @if(isset($currEmp) && (($currEmp->employee_type=="employee") || ($currEmp->employee_type=="workman") ))
                                <select class="form-control" id="type" name="type" disabled>
                            @else
                                <select class="form-control select2" id="type" name="type">
                            @endif
                                <option value="" selected>Select Type</option>
                                <option value="employee"  @if((old('type') == 'employee' ) || ($currEmp->employee_type == 'employee')) selected @endif>Employee</option>                                                        
                                <option value="workman"  @if((old('type') == 'workman' ) || ($currEmp->employee_type == 'workman')) selected @endif>Workman</option>                                                        
                            </select>
                            {!! $errors->first('type', '<label class="error" for="type">:message</label>')!!}
                        </div>
                        <div class="col-md-6 mb-1" id="employee-div" style="display: @if((old('type'))=='employee' || ($currEmp->employee_type == 'employee')) block @else none @endif;">
                            <label class="form-label" for="employee_id" class="required">{{ trans('master/master.employee') }}</label>
                            <br>
                            @if(isset($currEmp) && ($currEmp->employee_type == 'employee'))
                                <select class="form-control select2UI" id="employee_id" name="employee_id[]" disabled  multiple>
                            @else
                                <select class="form-control select2UI" id="employee_id" name="employee_id[]" multiple multiselect-search="true" multiselect-select-all="true" multiselect-max-items="1">
                            @endif
                                @foreach($employees as $employee)
                                    <option value="{{$employee->id}}"  @if((old('employee_id') == $employee->id ) || (isset($visit->employee_id) && $visit->employee_id == $employee->id) || (isset($currEmp->id) && $currEmp->id == $employee->id)) selected @endif>{{ ucfirst($employee->name).' ('.$employee->employee_code.')'}}</option>                      
                                @endforeach
                                </select>
                            {!! $errors->first('employee_id', '<label class="error" for="employee_id">:message</label>')!!}
                        </div>

                        <div class="col-md-6" id="workman-div" style="display: @if((old('type'))=='workman' || ($currEmp->employee_type == 'workman')) block @else none @endif;">
                            <label class="form-label" for="workman_id" class="required">{{ trans('master/master.workman') }}</label>
                            <br>
                            @if(isset($currEmp) && ($currEmp->employee_type == 'workman'))
                                <select class="form-control select2UI" id="workman_id" name="workman_id[]" multiple disabled>
                            @else
                                <select class="form-control select2UI" id="workman_id" name="workman_id[]" multiple multiselect-search="true" multiselect-select-all="true" multiselect-max-items="1">
                            @endif
                            @foreach($workmans as $workman)
                                    <option value="{{$workman->id}}"  @if((old('workman_id') == $workman->id ) || (isset($visit->employee_id) && $visit->employee_id == $workman->id) || (isset($currEmp->id) && $currEmp->id == $employee->id)) selected @endif>{{ ucfirst($workman->name).' ('.$workman->employee_code.')' }}</option>                      
                                @endforeach
                                </select>
                            {!! $errors->first('workman_id', '<label class="error" for="workman_id">:message</label>')!!}
                        </div>
                    </div>
                    @endif
                    <div class="content-footer position-absolute bottom-0 col-md-12">
                        <div class="d-flex justify-content-between content-footer">
                            <button type="button" class="btn btn-outline-secondary btn-prev">
                                <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                <span class="align-middle d-sm-inline-block d-none">{{trans('common/common.previous')}}</span>
                            </button>
                            <button type="submit" class="btn btn-success btn-submit" id="confirm-submit-text">{{trans('common/common.submit')}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
 
{!! Form::close() !!} 
<!-- Basic Floating Label Form section end -->

@endsection 

@push('footer-script')

<!-- BEGIN: Page Vendor JS-->
<script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
<script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
<script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
<script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
<!-- END: Page Vendor JS-->

<!-- BEGIN: Page JS-->
<script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
<script src="/app-assets/js/scripts/forms/form-validation.js"></script>
<script src="/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>
<!-- END: Page JS-->

 <!-- BEGIN: Page Vendor JS-->
<script src="/app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/dataTables.bootstrap5.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/responsive.bootstrap5.js"></script>
<script src="/app-assets/js/scripts/ui/ui-feather.js"></script>

<script src="/app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/datatables.buttons.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/jszip.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/pdfmake.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/vfs_fonts.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/buttons.html5.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/buttons.print.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/dataTables.rowGroup.min.js"></script>
<!-- END: Page Vendor JS-->
<script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>

<script src="/assets/plugins/bower_components/multiselect/js/bootstrap-multiselect.js"></script>

<!-- BEGIN: Page JS-->
<script src="/app-assets/js/scripts/tables/table-datatables-basic.js"></script>
<!-- END: Page JS-->


<script>
    var style = document.createElement('style');
    style.setAttribute("id","multiselect_dropdown_styles");
    style.innerHTML = `
    .multiselect-dropdown{
    display: inline-block;
    padding: 6px 5px 6px 5px;
    border-radius: 4px;
    border: solid 1px #ced4da;
    background-color: white;
    position: relative;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    width:100% !important;
    }
    // .select-drop{width:18em;}
    .placeholder, .vr{background-color:transparent}

    .multiselect-dropdown span.optext, .multiselect-dropdown span.placeholder{
    margin-right:0.5em; 
    margin-bottom:2px;
    padding:1px 0; 
    border-radius: 4px; 
    display:inline-block;
    }
    .multiselect-dropdown span.optext{
    background-color:#7367F0;
    padding:1px 0.75em; 
    color: #ffffff
    }
    .multiselect-dropdown span.optext .optdel {
    float: right;
    margin: 0 -6px 1px 5px;
    font-size: 0.7em;
    margin-top: 2px;
    cursor: pointer;
    color: #666;
    }
    .multiselect-dropdown span.optext .optdel:hover { color: #c66;}
    .multiselect-dropdown span.placeholder{
    color:#6E6B7B;
    }
    .multiselect-dropdown-list-wrapper{
    box-shadow: gray 0 3px 8px;
    z-index: 100;
    padding:2px;
    border-radius: 4px;
    border: solid 1px #ced4da;
    display: none;
    margin: -1px;
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    background: white;
    }
    .multiselect-dropdown-list-wrapper .multiselect-dropdown-search{
    margin-bottom:5px;
    }
    .multiselect-dropdown-list{
    padding:2px;
    height: 15rem;
    overflow-y:auto;
    overflow-x: hidden;
    }
    .multiselect-dropdown-list::-webkit-scrollbar {
    width: 6px;
    }
    .multiselect-dropdown-list::-webkit-scrollbar-thumb {
    background-color: #bec4ca;
    border-radius:3px;
    }

    .multiselect-dropdown-list div{
    padding: 5px;
    }
    .multiselect-dropdown-list input{
    height: 1.15em;
    width: 1.15em;
    margin-right: 0.35em;  
    }
    .multiselect-dropdown-list div.checked{
    }
    .multiselect-dropdown-list div:hover{
    background-color: #ced4da;
    }
    .multiselect-dropdown span.maxselected {width:100%;}
    .multiselect-dropdown-all-selector {border-bottom:solid 1px #999;}
    `;
    document.head.appendChild(style);

    function MultiselectDropdown(options){
        var config={
            search:true,
            height:'15rem',
            placeholder:'Select',
            txtSelected:'selected',
            txtAll:'All',
            txtRemove: 'Remove',
            txtSearch:'Search',
            ...options
        };
        function newEl(tag,attrs){
            var e=document.createElement(tag);
            if(attrs!==undefined) Object.keys(attrs).forEach(k=>{
            if(k==='class') { Array.isArray(attrs[k]) ? attrs[k].forEach(o=>o!==''?e.classList.add(o):0) : (attrs[k]!==''?e.classList.add(attrs[k]):0)}
            else if(k==='style'){  
                Object.keys(attrs[k]).forEach(ks=>{
                e.style[ks]=attrs[k][ks];
                });
            }
            else if(k==='text'){attrs[k]===''?e.innerHTML='&nbsp;':e.innerText=attrs[k]}
            else e[k]=attrs[k];
            });
            return e;
        }

        
        document.querySelectorAll("select[multiple]").forEach((el,k)=>{
            
            var div=newEl('div',{class:'multiselect-dropdown',style:{width:config.style?.width??el.clientWidth+'px',padding:config.style?.padding??''}});
            el.style.display='none';
            el.parentNode.insertBefore(div,el.nextSibling);
            var listWrap=newEl('div',{class:'multiselect-dropdown-list-wrapper'});
            var list=newEl('div',{class:'multiselect-dropdown-list',style:{height:config.height}});
            var search=newEl('input',{class:['multiselect-dropdown-search'].concat([config.searchInput?.class??'form-control']),style:{width:'100%',display:el.attributes['multiselect-search']?.value==='true'?'block':'none'},placeholder:config.txtSearch});
            listWrap.appendChild(search);
            div.appendChild(listWrap);
            listWrap.appendChild(list);

            el.loadOptions=()=>{
            list.innerHTML='';
            
            if(el.attributes['multiselect-select-all']?.value=='true'){
                var op=newEl('div',{class:'multiselect-dropdown-all-selector'})
                var ic=newEl('input',{type:'checkbox'});
                op.appendChild(ic);
                op.appendChild(newEl('label',{text:config.txtAll}));
        
                op.addEventListener('click',()=>{
                op.classList.toggle('checked');
                op.querySelector("input").checked=!op.querySelector("input").checked;
                
                var ch=op.querySelector("input").checked;
                list.querySelectorAll(":scope > div:not(.multiselect-dropdown-all-selector)")
                    .forEach(i=>{if(i.style.display!=='none'){i.querySelector("input").checked=ch; i.optEl.selected=ch}});
        
                el.dispatchEvent(new Event('change'));
                });
                ic.addEventListener('click',(ev)=>{
                ic.checked=!ic.checked;
                });
        
                list.appendChild(op);
            }

            Array.from(el.options).map(o=>{
                var op=newEl('div',{class:o.selected?'checked':'',optEl:o})
                var ic=newEl('input',{type:'checkbox',checked:o.selected});
                op.appendChild(ic);
                op.appendChild(newEl('label',{text:o.text}));

                op.addEventListener('click',()=>{
                op.classList.toggle('checked');
                op.querySelector("input").checked=!op.querySelector("input").checked;
                op.optEl.selected=!!!op.optEl.selected;
                el.dispatchEvent(new Event('change'));
                });
                ic.addEventListener('click',(ev)=>{
                ic.checked=!ic.checked;
                });
                o.listitemEl=op;
                list.appendChild(op);
            });
            div.listEl=listWrap;

            div.refresh=()=>{
                div.querySelectorAll('span.optext, span.placeholder').forEach(t=>div.removeChild(t));
                var sels=Array.from(el.selectedOptions);
                if(sels.length>(el.attributes['multiselect-max-items']?.value??5)){
                div.appendChild(newEl('span',{class:['optext','maxselected'],text:sels.length+' '+config.txtSelected}));          
                }
                else{
                sels.map(x=>{
                    var c=newEl('span',{class:'optext',text:x.text, srcOption: x});
                    if((el.attributes['multiselect-hide-x']?.value !== 'true'))
                    c.appendChild(newEl('span',{class:'optdel',text:'🗙',title:config.txtRemove, onclick:(ev)=>{c.srcOption.listitemEl.dispatchEvent(new Event('click'));div.refresh();ev.stopPropagation();}}));

                    div.appendChild(c);
                });
                }
                if(0==el.selectedOptions.length) div.appendChild(newEl('span',{class:'placeholder',text:el.attributes['placeholder']?.value??config.placeholder}));
            };
            div.refresh();
            }
            el.loadOptions();
            
            search.addEventListener('input',()=>{
            list.querySelectorAll(":scope div:not(.multiselect-dropdown-all-selector)").forEach(d=>{
                var txt=d.querySelector("label").innerText.toUpperCase();
                d.style.display=txt.includes(search.value.toUpperCase())?'block':'none';
            });
            });

            div.addEventListener('click',()=>{
            div.listEl.style.display='block';
            search.focus();
            search.select();
            });
            
            document.addEventListener('click', function(event) {
            if (!div.contains(event.target)) {
                listWrap.style.display='none';
                div.refresh();
            }
            });    
        });
    }
    
    window.addEventListener('load',()=>{
        MultiselectDropdown(window.MultiselectDropdownOptions);
    });
</script>


<script>
   
   $(document).ready(function(){
        $('#area_id').trigger('change');
        $('#shift_id').trigger('change');
        $("#employee-div").hide();
        $("#workman-div").hide();
        
        $('#type').trigger('change');
        callDt();

    })
    $('#type').change(function() {
            $(".select-type").attr("disabled", true);
            $('.select-type').parent().hide();
            var ids = $(this).val();
            
            if(ids=='employee')
            {
                $("#workman-div").hide();
                $("#employee-div").show();
                $("#workman_id").attr("disabled", true);
                $('.select-type').prop('selectedIndex',0);
                $('#employee_id option[value="'+employee_id+'"]').attr("selected","selected");
                $('#employee-div > .select-type').removeAttr("disabled");
                $('#employee_id').removeAttr("disabled");

            }
            else if(ids=="workman")
            {
                $("#employee-div").hide();
                $("#workman-div").show();
                $("employee_id").attr("disabled", true);
                $('.select-type').prop('selectedIndex',0);
                $('#workman_id option[value="'+employee_id+'"]').attr("selected","selected");
                $('#workman-div > .select-type').removeAttr("disabled");
                $('#workman_id').removeAttr("disabled");
            }
            else{
                $("#employee-div").hide();
                $("#workman-div").hide();
            }
        });

    function callDt() {
        var url = "{{ route('area-member-view',['slug'=>$alias,'id'=>$areaId]) }}";
        $.ajax({
            url: url,
            type: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
            },
            success: function (data) {
                var result = '';
                $.each(data['data'], function( index, value ) {
                    result +='<tr><td>' + (index+1) + '</td><td>' + value['name'] + '</td><td>' + value['employee_code'] + '</td><td>' + value['employee_type'] + '</td><td>';
                    result += '<div class="mb-1">';
                    result += '<a class="pe-1 dropdown-toggle hide-arrow text-primary" data-bs-toggle="dropdown">' + feather.icons['more-vertical'].toSvg({ class: 'font-small-4' }) +'</a>';
                    result += '<div class="dropdown-menu dropdown-menu-end">';
                    result += '<a class="dropdown-item" href="/member/{{$alias}}/area-mapping/' + value['id'] + '/employeedelete">'+feather.icons['trash'].toSvg({ class: 'font-4' })+' <span class="align-middle">Delete</span></a></td>';                            
                            
                });
                $('#employee_records').html(result);

            }
        });
        
    }
   

    function getShiftDetails (shift_id) {
        var url = "/member/{{$alias}}/area-mapping/shift";
        $.ajax({
            url: url,
            type: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                "id": shift_id},
            success: function (data) {
                $('#start_time').html(data.start_time);
                $('#end_time').html(data.end_time);
                }
        });
    }

    function getSubLocation (area_id) {
        var url = "/member/{{$alias}}/area-mapping/area";
        $.ajax({
            url: url,
            type: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                "id": area_id},
            success: function (data) {
                $('#parent_id').html(data[0].parent_area.name);
                $('#sublocation_name').html(data[1].name);
                $('#location_name').html(data[2].name);
                $('#sublocation_id').val(data[1].id);
                $('#location_id').val(data[2].id);

                }
        });
    }
</script>
@endpush