@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">
					<h4 class="breadcrumb ml-3"> <span class="text-muted fw-light breadcrumb-link"> Home /</span> Companies - {{ $companies->total() }} records fetched </h4>

					@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-header d-flex border-top rounded-0 flex-wrap py-2">
						<label> 
							<input type="text" class="keyword form-control" placeholder="Search Company"> 
							<input type="hidden" name="company_id" class="company-id">
						</label>

						@if(Auth::user()->hasRole('Administrator'))
							<div class="ms-auto d-flex justify-content-start justify-content-md-end align-items-baseline pull-right">
								<a href="javascript:;" class="btn btn-outline-primary ms-2 ms-sm-0 waves-effect waves-light create-company disabled-btn"><span><i class="ti ti-plus me-0 me-sm-1 ti-xs"></i> Add Company </span></a> 
							</div>
						@endif
					</div>
				</div>

				<div class="pt-3">
					<div class="card">
						<div class="card-datatable table-responsive text-nowrap">
							<table class="table">
								<thead class="border-top">
									<tr>
										<th> # </th>
										<th> Name </th>
										<th> Contacts </th>
										@hasrole('Administrator')											
											<th> No Routers & Bal (Ksh) </th>
										@endhasrole

										@if(Auth::user()->hasRole('Administrator') || Auth::user()->can('Administer Company'))
											<th> Actions </th>
										@endif
									</tr>
								</thead>

								<tbody>
									@foreach($companies as $company)
										<tr>
											<td> 
										        <a href="{{ url('company-profile/'.$company->id) }}" class="text-success"> {{ $company->ref_no }} </a> <br>

										        @hasrole('Administrator')
										            <a href="javascript:;" class="company-details{{ $company->id }} text-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Company Summary"> <i class="menu-icon tf-icons ti ti-text-wrap-disabled"></i> </a>
										        @endhasrole

										        <a href="{{ url('renew-company-subscription/'.$company->id) }}" class="copy-link float-end" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Copy Payment Link"> <i class="fa fa-link text-primary"></i> </a>
											</td>

											<td> 
												{{ $company->name }} <br>
												<small class="text-warning"><i> <i class="ti ti-map-pin"> </i> {{ $company->location?? 'N/A' }} </i></small>
											</td>

											<td>
												@if($company->email != "") <i class="ti ti-mail"></i><a href="mailto:{{ $company->email }}" class="text-success"> {{ $company->email }}</a><br> @endif

												@if($company->phone != "")<small><i><i class="ti ti-phone"></i><a href="tel:{{ $company->phone }}" class="text-primary"> {{ $company->phone }}</a> </i></small>@endif
											</td>

											@hasrole('Administrator')
												<td> 
													<span class="text-success"> <i class="ti ti-router me-1"></i> {{ count($company->companyRouters)}} Router(s) </span> <br> 
													<span class="text-warning"> <i class="ti ti-cash-banknote"></i> Ksh {{ number_format($company->Summary['totalBalance']) }} </span>
												</td>
											@endif
											
											@if(Auth::user()->hasRole('Administrator') || Auth::user()->can('Administer Company'))
												<td> 
													@if(Auth::user()->hasRole('Administrator') && !$company->Referrer)
														<a href="{{ $company->id }}" class="create-company-referrer disabled-btn" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Attach Referrer"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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-circles-relation"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9.183 6.117a6 6 0 1 0 4.511 3.986" /><path d="M14.813 17.883a6 6 0 1 0 -4.496 -3.954" /></svg> </a>
													@endif

													<a href="{{ $company->id }}" name="{{ $company->name }}" phone="{{ $company->phone }}" email="{{ $company->email }}" boxAddress="{{ $company->box_address }}" location="{{ $company->location }}" latitude="{{ $company->latitude }}" longitude="{{ $company->longitude }}" class="edit-company text-success disabled-btn" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Edit Company"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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-edit"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" /><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" /><path d="M16 5l3 3" /></svg> </a>

													@if($company->status == 0)
														<a href="{{ $company->id }}" class="activate-company text-primary disabled-btn" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Activate Company"> <svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" 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-circle-check"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M9 12l2 2l4 -4" /></svg> </a>
													@else
														<a href="{{ $company->id }}" class="deactivate-company text-warning disabled-btn" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Deactivate Company"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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-cancel"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M18.364 5.636l-12.728 12.728" /></svg> </a>
													@endif
												</td>
											@endif
										</tr>

										@hasrole('Administrator')
											@include('portal.companies.details')
											<script type="text/javascript">
												document.addEventListener('DOMContentLoaded', function()
												{
													$('.company-details{{ $company->id }}').click(function(e){
														e.preventDefault();

														$('#company-details{{ $company->id }}').offcanvas("toggle");
													});
												});
											</script>
										@endhasrole
									@endforeach
								</tbody>
							</table>

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

		@include('portal.companies.create')
		<script type="text/javascript" src="{{ url('custom/companies/create.js') }}"></script>

		@include('portal.companies.sms.load-sms')
		<script type="text/javascript" src="{{ url('custom/companies/sms/load-sms.js') }}"></script>

		@include('portal.companies.sms.delete')
		<script type="text/javascript" src="{{ url('custom/companies/sms/delete.js') }}"></script>

		@include('portal.companies.sms.update')
		<script type="text/javascript" src="{{ url('custom/companies/sms/update.js') }}"></script>

		@include('portal.companies.edit')
		<script type="text/javascript" src="{{ url('custom/companies/edit.js') }}"></script>

		@include('portal.companies.activate')
		<script type="text/javascript" src="{{ url('custom/companies/activate.js') }}"></script>

		@include('portal.companies.deactivate')
		<script type="text/javascript" src="{{ url('custom/companies/deactivate.js') }}"></script>

		@include('portal.company-referrers.create')
		<script type="text/javascript" src="{{ url('custom/company-referrers/create.js') }}"></script>

		@include('portal.companies.routers.create')
		<script type="text/javascript" src="{{ url('custom/companies/routers/create.js') }}"></script>

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

		<script type="text/javascript">
			document.addEventListener('DOMContentLoaded', function()
		  	{
		  		// Initialize all tooltips on the page
			    const tooltipTriggerList = document.querySelectorAll('.copy-link');
			    const tooltipList = [...tooltipTriggerList].map(el => new bootstrap.Tooltip(el));

			    // jQuery click handler for all elements with class 'copy-link'
			    $('.copy-link').on('click', function (e) {
			        e.preventDefault();

			        const link = $(this).attr('href');
			        const trigger = this;
			        const tooltip = bootstrap.Tooltip.getInstance(trigger); // get the tooltip instance

			        navigator.clipboard.writeText(link).then(function () {
			            trigger.setAttribute('data-bs-original-title', 'Copied!');
			            tooltip.show();

			            setTimeout(() => {
			                trigger.setAttribute('data-bs-original-title', 'Copy Payment Link');
			            }, 1500);
			        });
			    });
											    
			   	$('.create-company').click(function(e)
			   	{
			   		e.preventDefault();

			   		$("#configure-system").offcanvas("toggle");
			   	});
		  	});

		  (function($) 
		  {
		    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
		    
		    $( ".keyword" ).autocomplete({
		      source: function(request, response) 
		      {
		        $.ajax({
		          url:"{{ url('smartly-search-companies') }}",
		          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-companies/"+ui.item.company_id+"";
		      }
		    });

		    $( ".user-keyword" ).autocomplete({
		      source: function(request, response) 
		      {
		        $.ajax({
		          url:"{{ url('smartly-search-referrers') }}",
		          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();

		        $('.user-id').val(ui.item.user_id);
		      }
		    });
		  })(jQuery);
		</script>
	@endsection