@extends('member-new')

@push('head-script')
    <!-- BEGIN: Vendor 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-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">
    <!-- END: Page CSS-->
@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">
                    {{trans('master/master.add_employees')}}
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')

<section id="dashboard-ecommerce">
    {{ Form::open(array('url' => 'member/'.$alias.'/area-mapping/'.$id.'/addEmployee', 'method' => 'POST')) }}
    @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
    <!--Closable Alerts start -->
    <div class="row" id="errorMsg-div" style="display: none;">
        <div class="col-md-12">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <div class="alert-body" id="errorMsg">
                    
                </div>
            </div>
        </div>
    </div>
    <!--Closable Alerts end -->
    <div class="row match-height">
        <input type="hidden" id="employee_ids" name="employee_ids" value="{{json_encode($employeeIds)}}">
        <input type="hidden" id="delete_employee_ids" name="delete_employee_ids" value="[]">
            
        <!-- Statistics Card -->
        <div class="col-xl-12 col-md-12 col-12">
            <div class="card card-statistics">
                <div class="card-header pb-0">
                <h4 class="card-title">{{trans('master/master.add_employees')}}</h4>
                </div>
                <div class="card-body statistics-body">

                <div class="row d-flex align-items-end">
                    <div class="col-md-3 col-xl-3 col-12">
                        <div class="mb-1">
                            <label class="form-label" for="employee_type">{{trans('master/master.employee_type')}} <span class="text-danger">*</span></label>
                            <select class="form-control select2" id="employee_type" name="employee_type" onchange="getEmployeeByType(this,'employees')">
                                <option value="" selected>Select Type</option>
                                @foreach($employeeTypes as $employeeType)
                                    <option value="{{$employeeType}}"  @if((old('employee_type') == $employeeType )) selected @endif>{{ ucfirst($employeeType) }}</option>                                                        
                                @endforeach
                            </select>
                            {!! $errors->first('employee_type', '<label class="control-label" for="employee_type">:message</label>')!!}
                        </div>
                    </div>

                    <div class="col-md-3 col-xl-3 col-12 mb-1" id="employee-div" style="display:none">

                        <label class="form-label select-type-employees" for="employee_id">{{trans('master/master.employees')}} <span class="text-danger">*</span></label>
                        <select class="select-drop w-100" name="employee_id[]" id="employee_id" multiple multiselect-search="true" multiselect-select-all="true" multiselect-max-items="1">
                            @foreach($employees as $employee)
                                <option value="{{$employee->id}}">
                                    {{$employee->name}}({{$employee->employee_code}})
                                </option>
                            @endforeach
                        </select>
                        {!! $errors->first('employee_id', '<label class="control-label" for="employee_id">:message</label>')!!}

                    </div>
                    <div class="col-md-3 col-xl-3 col-12 mb-1" id="add-button-div" style="display:none;">
                        <button class="btn btn-icon btn-primary waves-effect waves-float waves-light" id="add-members" type="button" data-repeater-create="">
                            <i data-feather='plus'></i> <span>{{trans('master/master.add_employees')}}</span>
                        </button>
                    </div>
                </div>

                <div class="row mt-1 mt-sm-2" id="employees-list-div">
                    <div class="col-md-12 col-xl-12 col-12">
                        <div class="table-responsive">
                            <table class="table" id="employees-list">
                                <thead>
                                    <tr>
                                        <th>{{trans('master/master.employee_name')}}</th>
                                        <th>{{trans('master/master.employee_code')}}</th>
                                        <th>{{trans('master/master.employee_type')}}</th>
                                        <th>{{trans('common/common.actions')}}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($planMembers as $key=> $data)
                                        <tr>
                                            <td class='employee-data' value= "{{ $key }}">{{ $data['name'] }}</td>
                                            <td class='employee-data' value= "{{ $key }}">{{ $data['employee_code'] }}</td>
                                            <td class='employee-data' value= "{{ $key }}">{{ $data['employee_type'] }}</td>

                                            <td class='text-danger'><a style='pointer: cursor; font-weight: 600;' onclick='deleteEmployee.call(this)'>Remove</a></td>
                                        </tr>  
                                    @endforeach  
                                    </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="col-md-12 col-12">
                    <div class="mt-1">
                        <button type="submit" class="btn btn-primary waves-effect waves-float waves-light">Submit</button>
                    </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
        <!--/ Statistics Card -->
    </div>
    {{ Form::close() }}
</section>

@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/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/pickers/form-pickers.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();
            }
            });    
        });
    }
</script>

<script>

    $(document).ready(function() {
        $('#employee-div').hide();
        $('#add-button-div').show();
        $('#errorMsg').hide();

        $('#add-members').click(function(event){
            event.preventDefault();
            var result ="";
            var value = $('#employee_ids').val();
            var ids = JSON.parse(value);
            
            $("#employee_id").val().forEach(function(val){
                var id = parseInt(val);
                if($.inArray(id, ids) == -1 && id != -1982 ){
                    ids.push(id);
                    $.ajax({
                        url: "/member/{{$alias}}/area-mapping/getEmployeeData",
                        type: "POST",
                        dataType: "json",
                        data: {
                            _token:'{{ csrf_token() }}',
                            'empolyee_id' :id,
                        },
                        success: function(response){
                            var temp = "<tr><td class='employee-data' value="+ id + ">" + response.name + "</td><td class='employee-data' value="+ id + ">" + response.employee_code + "</td><td class='employee-data' value="+ id + ">" + response.employee_type + "</td><td class='text-danger'><a style='pointer: cursor; font-weight: 600;' onclick='deleteEmployee.call(this)'>Remove</a></td></tr>";
                            result+=temp;
                        }
                    });
                }
            });
            $.ajax({
                url: "/member/{{$alias}}/area-mapping/{{$id}}/isEmployeesValid",
                type: "POST",
                data: {
                    _token:'{{ csrf_token() }}',
                    'employee_ids' :ids,
                },
                success: function(dataResult){
                    if(dataResult == "true"){
                        $('#employees-list > tbody').append(result);
                        $('#employee_ids').val(JSON.stringify(ids));
                        $('#errorMsg-div').hide();

                    }
                    else{
                        $('#errorMsg').html(dataResult);
                        $('#errorMsg-div').show();
                    }
                }
            });
            
        });

    });

    function deleteEmployee(){
        var id = $(this).closest('tr').children().eq(0).attr('value');
        var value = $('#employee_ids').val();
        var ids = JSON.parse(value);
        ids.splice( $.inArray(parseInt(id),ids) ,1);
        $('#employee_ids').val(JSON.stringify(ids));
        var delValue = $('#delete_employee_ids').val();
        var delIds = JSON.parse(delValue);
        if($.inArray(id, delIds) == -1 && id != -1982 ){
            delIds.push(id);
            $('#delete_employee_ids').val(JSON.stringify(delIds));
        }
        $(this).closest('tr').remove();
        
    }

    function getEmployeeByType(th) {
        var typeId = $('#employee_type').val();
        $('.multiselect-dropdown').remove();
        var data = {
            employee_type: typeId,
            '_token': '{{{csrf_token()}}}'
        }
        $.ajax({
            url: "{{route('type--employees',['alias'=>$alias])}}",
            type: 'POST',
            data: data,
            success: function(data) {
                
                if (data) 
                {
                    $('#employee_id').html(data);
                    $('#employee-div').show();
                    MultiselectDropdown(window.MultiselectDropdownOptions);
                }

            }
        });  
    }
    

</script>


@endpush