@extends('layouts.member-app')
@php

if(count($asignedkeys)>0){
	$singleAsign  = array();
	foreach($asignedkeys as $key => $kval){
		$singleAsign{$kval['asignkeys']['keyword_id']}[] = $kval['asignkeys']['keyword_value'];	 
	}
	$asignFire =  (count($singleAsign) > 0 && !empty($singleAsign[1]))?implode(',',array_unique($singleAsign[1])):''; 
	$asignHigh =  (count($singleAsign) > 0 && !empty($singleAsign[2]))?implode(',',array_unique($singleAsign[2])):''; 
	$asignMed =  (count($singleAsign) > 0 && !empty($singleAsign[3]))?implode(',',array_unique($singleAsign[3])):''; 
	$asignLow =  (count($singleAsign) > 0 && !empty($singleAsign[4]))?implode(',',array_unique($singleAsign[4])):''; 
}
$fire = (count($totalData) > 0 && !empty($totalData[1]))?implode(',',$totalData[1]['keyval']):'';
$high = (count($totalData) > 0 && !empty($totalData[2]))?implode(',',$totalData[2]['keyval']):'';
$med = (count($totalData) > 0 && !empty($totalData[3]))?implode(',',$totalData[3]['keyval']):'';
$low = (count($totalData) > 0 && !empty($totalData[4]))?implode(',',$totalData[4]['keyval']):'';

@endphp

@section('page-title')
   
@endsection

@push('head-script')
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/custom-select/custom-select.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/tagify-master/dist/tagify.css') }}">
	<style>
	.addrow{margin-top:25px;padding:0 84px 0 18px;}
	.submitbtn{margin-bottom:25px;}
	</style>
@endpush

@section('content')


					<div class="container" style="border:1px solid #ccc; max-width:1000px;">
					<div class="row addrow">
						<div class="col-md-8">
							<h4>Add/Edit Keywords</h4>
						</div>
						<div class="col-md-2">
							<a href="{{ route('member.keywords.assign') }}" class='btn btn-primary'>+Keyword Assign</a>
						</div>
						<div class="col-md-2">
							<a href="{{ route('member.keywords.assignlist') }}" class='btn btn-primary'>Listing Assign Keywords</a>
						</div>

					</div>
					{!! Form::open(['id'=>'createkeyword','class'=>'ajax-form','method'=>'POST']) !!}
                        <!--/span-->
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Fire</label>
                                        <input name='fire'  placeholder='Add Keyword' value='{{$fire}}'>
										<p>Assigned Fire Keywords:<b> {{$asignFire??''}} </b></p>
                                    </div>
								</div>
							</div>
							<div class="row">		
								<div class="col-md-12">
									<div class="form-group">
										<label>High</label>
										<input name='high' placeholder='Add Keyword' value='{{$high}}'>
										<p>Assigned High Keywords:<b> {{$asignHigh??''}} </b></p>
                    
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12">
									<div class="form-group">
										<label>Medium</label>
										<input name='medium' placeholder='Add Keyword' value='{{$med}}'>
										<p>Assigned Med Keywords: <b> {{$asignMed??''}} </b> </p>
                    
									</div>
								</div>
							</div>
							<div class="row">	
								<div class="col-md-12">
									<div class="form-group">
										<label>Low</label>
										<input name='low' placeholder='Add Keyword' value='{{$low}}'>
										<p>Assigned Low Keywords: <b> {{$asignLow??''}} </b> </p>
                    
									</div>
								</div>
							</div>
							<div class="row submitbtn">
								<div class="col-md-4"></div>
								<div class="col-md-4">
								<button class="btn btn-block btn-success p-4" type="submit" id="save-form" class="btn btn-success"><i class="fa fa-check"></i> @lang('app.save')</button>
								</div>
							</div>	
                        </form>
						</div>
                    </div>
                </div>
            </div>
        </div>
    </div>    <!-- .row -->
    
@endsection

@push('footer-script')
<script src="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/custom-select/custom-select.min.js') }}"></script>
    <script src="{{ asset('plugins/tagify-master/dist/tagify.js') }}"></script>
    <script data-name="basic">
        (function () {
            $("#department").select2({
                formatNoMatches: function () {
                    return "{{ __('messages.noRecordFound') }}";
                }
            });
            $("#designation").select2({
                formatNoMatches: function () {
                    return "{{ __('messages.noRecordFound') }}";
                }
            });
            $(".select2").select2({
                formatNoMatches: function () {
                    return "{{ __('messages.noRecordFound') }}";
                }
            });

            var input = document.querySelector('input[name=fire]'),
                // init Tagify script on the above inputs
                tagify = new Tagify(input, {
                    whitelist: {!! json_encode($skills) !!},
                    //  blacklist : [".NET", "PHP"] // <-- passed as an attribute in this demo
                });
                var input = document.querySelector('input[name=high]'),
                // init Tagify script on the above inputs
                tagify = new Tagify(input, {
                    whitelist: {!! json_encode($skills) !!},
                    //  blacklist : [".NET", "PHP"] // <-- passed as an attribute in this demo
                });
                var input = document.querySelector('input[name=medium]'),
                // init Tagify script on the above inputs
                tagify = new Tagify(input, {
                    whitelist: {!! json_encode($skills) !!},
                    //  blacklist : [".NET", "PHP"] // <-- passed as an attribute in this demo
                });
                var input = document.querySelector('input[name=low]'),
                // init Tagify script on the above inputs
                tagify = new Tagify(input, {
                    whitelist: {!! json_encode($skills) !!},
                    //  blacklist : [".NET", "PHP"] // <-- passed as an attribute in this demo
                });

// Chainable event listeners
            tagify.on('add', onAddTag)
                .on('remove', onRemoveTag)
                .on('input', onInput)
                .on('invalid', onInvalidTag)
                .on('click', onTagClick);

// tag added callback
            function onAddTag(e) {
                tagify.off('add', onAddTag) // exmaple of removing a custom Tagify event
            }

// tag remvoed callback
            function onRemoveTag(e) {
            }

// on character(s) added/removed (user is typing/deleting)
            function onInput(e) {
            }

// invalid tag added callback
            function onInvalidTag(e) {
            }

// invalid tag added callback
            function onTagClick(e) {
            }

        })()
    </script>

    <script>


        $('#save-form').click(function () {
            
            $.easyAjax({
                url: '{{route('member.keywordstore')}}',
                container: '#createkeyword',
                type: "POST",
                redirect: true,
                //file: (document.getElementById("image").files.length == 0) ? false : true,
                data: $('#createkeyword').serialize()
            })
        });

      

    </script>
@endpush