@extends('layouts.portal.app')
	@section('content')
		<script type="text/javascript" src="{{ url('custom/js/jquery-3.3.1.js') }}"></script>
		<link rel="stylesheet" type="text/css" href="{{ url('custom/smart-search/jquery-ui.min.css') }}">

		<div class="content-wrapper">
			<div class="container-xxl flex-grow-1 container-p-y">
				<div class="card">
					<div class="mb-3">
						<div class="ms-3 d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center">
							<div class="mb-2 mb-lg-0"> <span> Home /</span>  Keys - {{ number_format($companyRouters->total()) }} records fetched </div>

							<div class="pe-4" style="padding-top: 2%;"> 
								<label> 
									<input type="text" class="keyword form-control" placeholder="Search router"> 
									<input type="hidden" name="router_id" class="router-id">
								</label> 
							</div>
						</div>
					</div>

					@if(Session::has('errorResponse')) 
						<h6 class="row"> 
							<div class="col-md-12 temporary-alert">
								<div class="alert alert-danger alert-dismissible" role="alert"> <i class="fa fa-info-circle"></i> {!! Session::has('errorResponse') ? Session::get("errorResponse") : '' !!} <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> </button> </div>
							</div>
						</h6>
					@endif

					<div class="card-datatable table-responsive">
						<table class="table">
							<thead class="border-top">
								<tr>
									<th> # </th>
									<th> Name </th>
									<th> Documents </th>
								</tr>
							</thead>

							<tbody>
								@foreach($companyRouters as $companyRouter)
								    @php
								        $cleanRefNo = ltrim(preg_replace('/[^0-9]/', '', $companyRouter->id), '0');
										$crtCert = "router{$cleanRefNo}.crt";
										$keyCert = "router{$cleanRefNo}.key";
								    @endphp

								    <tr>
								        <td> {{ $loop->iteration }} </td>

								        <td> {{ $companyRouter->name }} </td>

								        <td> 
								            <a href="{{ route('caCrt.download', ['file' => 'ca.crt']) }}" class="btn btn-xs btn-success"> 
								                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-download">
								                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
								                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
								                    <path d="M7 11l5 5l5 -5" />
								                    <path d="M12 4l0 12" />
								                </svg> CA 
								            </a> 

								            <a href="{{ route('crt.download', ['file' => $crtCert]) }}" class="btn btn-xs btn-success"> 
								                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-download">
								                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
								                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
								                    <path d="M7 11l5 5l5 -5" />
								                    <path d="M12 4l0 12" />
								                </svg> CRT 
								            </a> 

								            <a href="{{ route('key.download', ['file' => $keyCert]) }}" class="btn btn-xs btn-success"> 
								                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-download">
								                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
								                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
								                    <path d="M7 11l5 5l5 -5" />
								                    <path d="M12 4l0 12" />
								                </svg> KEY 
								            </a>
								        </td>
								    </tr>
								@endforeach
							</tbody>
						</table>

						{{ $companyRouters->render() }}
					</div>
				</div>
			</div>
		</div>

		<script src="{{ url('custom/smart-search/jquery-ui.min.js') }}" type="text/javascript"></script>

		<script type="text/javascript">
			(function($) 
			{
				var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

				$( ".keyword" ).autocomplete({
					source: function(request, response) 
					{
						$.ajax({
							url:"{{ url('smartly-search-company-routers') }}",
							type: 'post',
							dataType: "json",
							data: {
								_token: CSRF_TOKEN,
								keyword: request.term
							},

							success: function(data) 
							{
								response(data);
							}
						});
					},

					select: function (event, ui) 
					{
						var app_url = $('#app_url').val();

						window.location.href = ""+app_url+"found-router=certificate-keys/"+ui.item.company_router_id+"";
					}
				});
			})(jQuery);
		</script>
	@endsection