@extends('layouts.app')

@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') }}">
@endpush

@section('content')
<div class="row title-row">
   <div class="col-md-12">
      <h4 class="page-title"><i class="{{ $pageIcon }}"></i> Assign Keywords to Lead Agent</h4>
   </div>
</div>

@foreach($keywords as $totalKey)
<div class="container bord">
	<div class="row">
		<h2 class=""><b>{{$totalKey['key_name']}}</b> </h2>
		<div class="col-md-12">
			<ul class="list-group">
				@foreach($totalKey['total_keys'] as $key => $data)
					<li class="list-group-item">
						<div class="row">
							<div class="col-md-6">
								{{$key+1}}. {{$data['keyword_value']}}
							</div>
							<div class="col-md-6"> 
								<button class="btn btn-sm btn-primary" onclick="asignids('','')" data-toggle="modal" data-target="#assignModal">Assign to Lead Agent</button>
							</div>
						</div>
						
					</li>
				@endforeach
			</ul>
		</div>
	</div>
</div>
@endforeach

<div id="assignModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Assign Agent</h4>
      </div>
      <div class="modal-body">
		  <form id="assignagent" class="ajax-form" method="POST">
            @csrf
			 <h4> Selected Keyword : <span id='keywrdval'></span> </h4>
			 
			 <select class="select2 form-control" data-placeholder="@lang('modules.tickets.chooseAgents')"  id="agent_id" name="agent_id">
				<option value="">@lang('modules.tickets.chooseAgents')</option>
				@foreach($agentList as $emp)
					<option value="{{ $emp->id }}">{{ ucwords($emp->user->name) }} @if($emp->user->id == $user->id)
							(YOU) @endif</option>
				@endforeach
			</select>
			<input type="hidden" id='asignkeyid' name='keyvalueid' >
			
			<button class='btn btn-primary btn-block' type="submit" id="saveagentkey" style="margin-top:25px;">Submit </button> 
		</form>
      </div>
    </div>
 </div>
</div>
	
	   
@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>
function asignids(id,val){
	$('#asignkeyid').val(id);
	$('#keywrdval').html(val);
	}
	
	
	
        $('#saveagentkey').click(function () {
            
            $.easyAjax({
                url: '{{route('agentkeywordstore')}}',
                container: '#assignagent',
                type: "POST",
                redirect: true,
                //file: (document.getElementById("image").files.length == 0) ? false : true,
                data: $('#assignagent').serialize()
            })
        });

	
	
	
	
</script>
@endpush