@extends('admin.layouts.admin_app')
@section('dashboard_content')
	@if (Session::get('success'))
		<div class="alert alert-success alert-dismissible">
		  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
		  <strong>{!! Session::get('success')  !!}</strong>
		</div>
	@endif
	@if (Session::get('danger'))
		<div class="alert alert-danger alert-dismissible">
		  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
		  <strong>{!! Session::get('danger')  !!}</strong>
		</div>
	@endif

	@if (Session::get('url_profile'))
		@php
			echo "<script>window.open('".Session::get('url_profile')."', '_blank')</script>";
		@endphp
	@endif
<header class="page-header">
	<h2>Candidates</h2>
</header>
<!-- start: page -->
<section class="panel">
	<header class="panel-heading">
		<div class="row" style="padding-left: 3rem; padding-right: 3rem; display: flex;  align-items: center;">
			<h2 class="panel-title col-sm-11">Candidates</h2>
			<div class="col-sm-1 text-right">
				<a href="{{ route('candidate.create') }}" class="btn btn-primary">Publish <i class="fa fa-plus"></i></a>
			</div>
		</div>
	</header>
	<div class="panel-body">
		<div class="row form-group" style="align-items: end;display: flex; justify-content:center;">
			<div class="col-sm-3">
				<label for="select_status">Status</label>
				<select name="status" id="select_status" class="form-control">
					<option value="" selected>Select...</option>
					@foreach($status_candidates as $status)
						<option value="{{ $status["id"]}}">{{ $status["status"] }}</option>
					@endforeach
				</select>
			</div>
			<div class="col-sm-3">
				<label for="txt_candidate_name">Name</label>
				<input type="text" name="name" id="txt_candidate_name" class="form-control" placeholder="Candidate Name">
			</div>
			<div class="col-sm-3">
				<input type="hidden" name="grouper" id="hdnGrouper"  value="">
				<label for="txt_grouper">Tags</label>
				<select id="grouper" class="grouper select-tags" multiple="multiple"></select>
			</div>
			<div class="col-sm-1">
				<a class="btn btn-primary" id="btn_filter" onclick="getCandidates();">Search <i class="fa fa-search"></i></a>
			</div>
		</div>
		<div id="jsGrid"></div>
	</div>
</section>

<div id="container-loader" class="loader d-none">
	<div id="loader" class="loader-img"></div>
</div>
<!-- MODAL CONFIRM DELETE  -->
<div class="modal fade" id="mdl_confirm_delete" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-lg">
	  <div class="modal-content">
		<div class="modal-header">
		  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		  <h4 class="modal-title" id="myModalLabel"><i class="fas fa-exclamation-triangle"></i> Alert</h4>
		</div>
		<div class="modal-body">
			<h5>Are you sure you want to delete this candidate? - <span id="span_nickname"></span></h5>
		</div>
		<div class="modal-footer" style="justify-content: end;display: flex;">
			<div style="display: flex;">
				<button type="button" class="btn btn-default" style="margin-right: 3rem;" data-dismiss="modal">Close</button>
				<form action="{{ route('candidate.delete')}}" method="post">
					  @csrf
					  <button type="submit" class="btn btn-danger" id="btn_delete_Candidate">Confirm</button>
					  <input type="hidden" id="hdn_id_candidate" name="candidate_id">
				</form>
			</div>
		</div>
	  </div>
	</div>
</div>

<style>
    .select2{
        width:100%!important;
    }
    .select2-results__message {
        display: none !important;
    }
</style>
@endsection
@push('styles')
	<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
	<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
@endpush
@push('scripts')
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
	<script>
		$( document ).ready(function() {
			//Grouper
			$('#grouper').select2({
                tags: true,
                tokenSeparators: [','],
                placeholder: "",
                seperator: ";"
            });

			$("#grouper").on("select2:select", function (e) {
                var select_val = $(e.currentTarget).val();
                var tags = select_val.toString();
                $("#hdnGrouper").val(tags);
            });

            $("#grouper").on("select2:unselect", function (e) {
                var select_val = $(e.currentTarget).val();
                var tags = select_val.toString();
                $("#hdnGrouper").val(tags);
            });
		});
	</script>
	<script>
		var candidates_php = '{!!json_encode($candidates)!!}';
		var candidates = $.parseJSON(candidates_php);

		var status_php = '{!!json_encode($status_candidates)!!}';
		var status_profile = $.parseJSON(status_php);

		$("#jsGrid").jsGrid({
			width: "100%",
			height: "650px",
	
			inserting: false,
			editing: false,
			sorting: true,
			paging: true,
			autosearch: true,
			deleteConfirm: "Do you really want to delete the candidate?",
			data: candidates,
			fields: [
				{ name: "id", title: "Id", type: "number", width: 30  },
				{ name: "Profile Picture", type: "text", width: 30, itemTemplate: function(item) {
					if(item){
						var url_image = "{{asset('uploads/')}}" +"/"+ item;
					}
					else{
						var url_image = "{{asset('images/capita-black-faviconx2.png')}}";
					}
					
					return "<img style='max-width: 100%;' src='"+url_image+"'>";
             	}},
				{ name: "Name", type: "text", width: 150 },
				{ name: "Tags", type: "text", width: 200 },
				{ name: "status", title: "Status", type: "select", items: status_profile, valueField: "id", textField: "status", width: 50 },
				{ name: "code", visible: false, width: 0 },
				{ name: "Created on", type: "date", width: 70},
				{ name: "Updated on", type: "date", width: 70},
				{ type: "control",
					itemTemplate: function(value, item) {
						var $result = jsGrid.fields.control.prototype.itemTemplate.apply(this, arguments);

						if(item.code){
							var $customCopyLinkButton = $("<a class='clipboard-button btn-link' style='margin-right:1.5rem;'><i class='fas fa-link fa-lg'></i></a>")
							.click(function(e) {
								var url_profile = "{!! Request::root() . '/profile/' !!}" + item.code;
								navigator.clipboard.writeText(url_profile);
								window.open(url_profile, '_blank');
							});
						}
						

						var $customEditButton = $("<button style='margin-right:1.5rem;'>").attr({class: "customGridEditbutton jsgrid-button jsgrid-edit-button"})
						.click(function(e) {
							var url_edit_candidate = "{{ url('/home/candidates/candidate-edit') }}"+ "/" +item.id;
							window.open(url_edit_candidate, '_blank');
							//window.location.href = url_edit_candidate;
						});

						var $customDeleteButton = $("<button>").attr({class: "customGridDeletebutton jsgrid-button jsgrid-delete-button"})
						.click(function(e) {
							$("#span_nickname").text(item.Name);
							$("#hdn_id_candidate").val(item.id);
							$("#mdl_confirm_delete").modal('show');
						});

						return $("<div>").append($customCopyLinkButton).append($customEditButton).append($customDeleteButton);
					},
				}
			],
		});

		function getCandidates(){
			$(".loader").removeClass('d-none');
			var status = $("#select_status").val();
			var nickname = $("#txt_candidate_name").val();
			var tags = $("#hdnGrouper").val();
			$.ajax({
                method: 'POST',
                url: "{{route('candidate.list')}}",
				data: { 
                    'status' : status,
                    'nickname' : nickname,
					'grouper' : tags
                },
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
            }).done(function(data){
				var status_php = '{!!json_encode($status_candidates)!!}';
				var status_profile = $.parseJSON(status_php);
			
				$("#jsGrid").jsGrid({
					width: "100%",
					height: "650px",
			
					inserting: false,
					editing: false,
					sorting: true,
					paging: true,
					autosearch: true,
					deleteConfirm: "Do you really want to delete the candidate?",
					data: data,
					fields: [
						{ name: "id", title: "Id", type: "number", width: 30  },
						{ name: "Profile Picture", type: "text", width: 30, itemTemplate: function(item) {
							var url_image = "{{asset('uploads/')}}" +"/"+ item;
							return "<img style='max-width: 100%;' src='"+url_image+"'>";
						}},
						{ name: "Name", type: "text", width: 150 },
						{ name: "Tags", type: "text", width: 200 },
						{ name: "status", title: "Status", type: "select", items: status_profile, valueField: "id", textField: "status", width: 50 },
						{ name: "code", visible: false, width: 0 },
						{ name: "Created on", type: "date", width: 70},
						{ name: "Updated on", type: "date", width: 70},
						{ type: "control",
							itemTemplate: function(value, item) {
								var $result = jsGrid.fields.control.prototype.itemTemplate.apply(this, arguments);

								if(item.code){
									var $customCopyLinkButton = $("<a class='clipboard-button btn-link' style='margin-right:1.5rem;'><i class='fas fa-link fa-lg'></i></a>")
									.click(function(e) {
										var url_profile = "{!! Request::root() . '/profile/' !!}" + item.code;
										navigator.clipboard.writeText(url_profile);
										window.open(url_profile, '_blank');
									});
								}
								

								var $customEditButton = $("<button style='margin-right:1.5rem;'>").attr({class: "customGridEditbutton jsgrid-button jsgrid-edit-button"})
								.click(function(e) {
									window.location.href = "{{ url('/home/candidates/candidate-edit') }}"+ "/" +item.id;
								});

								var $customDeleteButton = $("<button>").attr({class: "customGridDeletebutton jsgrid-button jsgrid-delete-button"})
								.click(function(e) {
									$("#span_nickname").text(item.Name);
									$("#hdn_id_candidate").val(item.id);
									$("#mdl_confirm_delete").modal('show');
								});
								return $("<div>").append($customCopyLinkButton).append($customEditButton).append($customDeleteButton);
							},
						}
					],
				});

				$(".loader").addClass('d-none');
            }).fail(function(response){
                alert('message: ' +response.responseText + ' | status: ' + response.status);
				$(".loader").addClass('d-none');
            });
		}
	</script>
@endpush