@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> {{ $servicePlan? $servicePlan->name: '' }} Clients - {{ $companyCustomerServicePlans->total() }} records fetched
					</h4>

					@if($servicePlan != "")
						<div class="d-flex flex-wrap justify-content-center align-items-center mx-3 my-3 gap-2">
					    	<a href="{{ url('status-service-plan-customers/1/'.$servicePlan->id) }}" class="btn btn-outline-success d-flex justify-content-between align-items-center flex-grow-1 mx-2 px-4 text-center"> <span> <i class="ti ti-circle-check"> </i> Active </span> {{ number_format($activeCompanyCustomerServicePlans) }} </a>

					    	<a href="{{ url('status-service-plan-customers/0/'.$servicePlan->id) }}" class="btn btn-outline-warning d-flex justify-content-between align-items-center flex-grow-1 mx-2 px-4 text-center"> <span> <i class="ti ti-circle-x"> </i> Inactive </span> {{ number_format($inactiveCompanyCustomerServicePlans) }} </a>

					    	<a href="{{ url('status-service-plan-customers/2/'.$servicePlan->id) }}" class="btn btn-outline-danger d-flex justify-content-between align-items-center flex-grow-1 mx-2 px-4 text-center"> <span> <i class="ti ti-ban"> </i> Expired </span> {{ number_format($expiredCompanyCustomerServicePlans) }} </a>

				        	<a href="javascript:;" class="btn btn-outline-success d-flex justify-content-between align-items-center flex-grow-1 mx-2 px-4 text-center"> <span> <svg  xmlns="http://www.w3.org/2000/svg"  width="20"  height="20"  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-wifi"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 18l.01 0" /><path d="M9.172 15.172a4 4 0 0 1 5.656 0" /><path d="M6.343 12.343a8 8 0 0 1 11.314 0" /><path d="M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0" /></svg> Online </span> <span class="online-clients{{ $activeCompanyRouter->id }}"> </span> </a>

				        	<a href="javascript:;" class="btn btn-outline-danger d-flex justify-content-between align-items-center flex-grow-1 mx-2 px-4 text-center"> <span> <svg  xmlns="http://www.w3.org/2000/svg"  width="20"  height="20"  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-wifi-off"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 18l.01 0" /><path d="M9.172 15.172a4 4 0 0 1 5.656 0" /><path d="M6.343 12.343a7.963 7.963 0 0 1 3.864 -2.14m4.163 .155a7.965 7.965 0 0 1 3.287 2" /><path d="M3.515 9.515a12 12 0 0 1 3.544 -2.455m3.101 -.92a12 12 0 0 1 10.325 3.374" /><path d="M3 3l18 18" /></svg> Offline </span> <span class="offline-clients{{ $activeCompanyRouter->id }}"> </span> </a>

					        <script type="text/javascript">
								document.addEventListener('DOMContentLoaded', function() 
								{
									var activeCompanyRouter = {!! json_encode($activeCompanyRouter) !!};

									$(".online-clients"+activeCompanyRouter.id+", .offline-clients"+activeCompanyRouter.id+"").each(function() 
									{
										$(this).css("position", "relative").addClass("client-block client-overlay").block({
											message: '<div class="spinner-border text-primary" role="status"></div>',
											css: { backgroundColor: "transparent", border: "0" },
											overlayCSS: { backgroundColor: "#fff", opacity: 0.8 }
										});

										$(this).find('.blockUI').css("z-index", "0");
									});

								    var app_url = $('#app_url').val();
								    var servicePlan = {!! json_encode($servicePlan) !!};

								    setTimeout(function() 
									{
										$.ajax({
											url: ''+app_url+'company-service-plan-details/'+servicePlan.id+'/'+activeCompanyRouter.id+'',
											type: 'GET',
											dataType: 'json',
											success: function(response) 
											{
												$(".online-clients"+activeCompanyRouter.id+", .offline-clients"+activeCompanyRouter.id+"").each(function() 
												{
													$(this).unblock().removeClass("client-block client-overlay");
												});

												if(response.status == "ok")
												{

													console.log(response.onlineClients);

													$('.online-clients'+activeCompanyRouter.id+'').empty().append(response.onlineClients);
													$('.offline-clients'+activeCompanyRouter.id+'').empty().append(response.offlineClients);
												}else
												{
													$('.online-clients'+activeCompanyRouter.id+'').empty().append('-');
													$('.offline-clients'+activeCompanyRouter.id+'').empty().append('-');
												}
											}
										});
									}, 1000); // 1000ms = 1 second
								});
							</script>
						</div>
					@endif

					@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 Client"> 
							<input type="hidden" name="company_customer_service_plan_id" class="company-customer-service-plan-id">
						</label>

						<div class="ms-auto d-flex justify-content-start justify-content-md-end align-items-baseline pull-right">
							<span class="me-3">
							    <a href="{{ url('download-company-customer-service-plan-clients/' . ($servicePlan ? $servicePlan->id : '') . '/' . ($activeCompany ? $activeCompany->id : '')) }}" class="btn btn-outline-primary ms-2 ms-sm-0 waves-effect waves-light disabled-btn">
							        <span><i class="ti ti-download me-0 me-sm-1 ti-xs"></i> Download </span>
							    </a>
							</span>

							@if(Auth::user()->hasRole('Administrator') || Auth::user()->can('Administer Company') || Auth::user()->can('Clients.edit'))
								<span class=""> <a href="javascript:;" class="btn btn-outline-primary ms-2 ms-sm-0 waves-effect waves-light create-company-customer disabled-btn"><span><i class="ti ti-plus me-0 me-sm-1 ti-xs"></i> Add Client </span></a> </span>
							@endif
						</div>
					</div>

					<div class="card-datatable table-responsive text-nowrap">
						<table class="table">
							<thead class="border-top">
								<tr>
									<th> A/c No </th>
									<th> Customer </th>
									<th> Credentials </th>
									<th> Plan </th>
									<th> Expiry Date </th>
									<th> Date Purchased </th>
									@if(Auth::user()->hasRole('Administrator') || Auth::user()->hasRole('Client'))
										<th> Actions </th>
									@endif
								</tr>
							</thead>

							<tbody>
								@foreach($companyCustomerServicePlans as $companyCustomerServicePlan)
									<tr>
										<td> 
											<strong> <a href="javascript:;" class="text-success company-customer-service-plan-summary{{ $companyCustomerServicePlan->id }}"> {{ $companyCustomerServicePlan->ref_no }} </a> </strong> <br> 

											<span class="online-status{{ $companyCustomerServicePlan->id }}">
												@if($companyCustomerServicePlan->online_status == 1)
													<span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Client is online"> <i class="menu-icon tf-icons ti ti-toggle-right text-success"></i> </span>
												@else
													<span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Client is offline"> <i class="menu-icon tf-icons ti ti-toggle-left text-danger"></i> </span>
												@endif 
											</span> 

											<span class="ms-2"> <a href="{{ $companyCustomerServicePlan->id }}" class="reload-customer-online-offline-status disabled-btn" data-id="{{ $companyCustomerServicePlan->id }}" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Reload Online/Offline Status"> <span class="refresh-icon-{{ $companyCustomerServicePlan->id }}"> <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-refresh-dot"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" /> <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" /> <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> </svg> </span> </a> </span>

											@if($companyCustomerServicePlan->companyServicePlan && $companyCustomerServicePlan->companyServicePlan->service_plan_id != 1)
												<span class="ms-2"> <a href="{{ url('renew-company-customer-service-plan-subscription/'.$companyCustomerServicePlan->id) }}" class="copy-link" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Copy Payment Link"> <i class="fa fa-link text-warning"></i> </a> </span>
											@endif
										</td>

										<td> 
											{{ $companyCustomerServicePlan->profile_name }}

											<br>

											@php
												$phone = $companyCustomerServicePlan->companyCustomer->phone ?? null;
											    $voucherCode = $companyCustomerServicePlan->companyPrepaidVoucher->voucher_code ?? null;
											@endphp

											<small>
												@if($phone != "")
													<a href="{{ $phone ? 'tel:' . $phone : '#' }}"> <i class="ti ti-phone"></i> {{ $phone }} </a>
												@elseif($voucherCode != "")
													<span class="text-warning"> Voucher Code {{ $voucherCode }} </span>
												@endif
											</small>
										</td>

										<td> 
											@if($companyCustomerServicePlan->companyServicePlan->service_plan_id == 1)
												<small>Username: {{ $companyCustomerServicePlan->username?? preg_replace('/[^A-Za-z0-9 ]/', '', $companyCustomerServicePlan->profile_name) }} <br>
												Password: {{ $companyCustomerServicePlan->password }} </small>
											@endif
										</td>

										<td> 
											{{ $companyCustomerServicePlan->companyServicePlan? $companyCustomerServicePlan->companyServicePlan->name: '' }} <br>

											@if($companyCustomerServicePlan->status == 0) 
												<span class="text-warning"> <i class="ti ti-circle-x"> </i> inactive </span>
											@elseif($companyCustomerServicePlan->status == 1) 
												<span class="text-success"> <i class="ti ti-circle-check"> </i> active </span>
											@elseif($companyCustomerServicePlan->status == 2) 
												<span class="text-danger"> <i class="ti ti-ban"> </i> expired </span>
											@endif

											@if($companyCustomerServicePlan->static_ip_address != "")
											| <small class="text-warning"> {{ $companyCustomerServicePlan->static_ip_address }} </small>
											@endif
										</td>

										<td> 
											{{ \Carbon\Carbon::parse($companyCustomerServicePlan->subscription_expiry_date)->format('d M Y') }} at <br> <small> {{ \Carbon\Carbon::parse($companyCustomerServicePlan->subscription_expiry_date)->format('h:i A') }} </small>

											<a href="{{ $companyCustomerServicePlan->id }}" servicePlanId="{{ $companyCustomerServicePlan->companyServicePlan->service_plan_id?? '' }}" subscriptionExpiryDate="{{ \Carbon\Carbon::parse($companyCustomerServicePlan->subscription_expiry_date)->format('Y-m-d') }}" class="change-company-customer-service-plan-expiry-date float-end disabled-btn text-success" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Change Date"> <i class="ti ti-edit"></i> </a> 
										</td>

										<td> 
											@if($companyCustomerServicePlan->companyServicePlan && $companyCustomerServicePlan->companyServicePlan->service_plan_id != 1)
												Sub. Amnt: Ksh {{ number_format($companyCustomerServicePlan->monthly_sub_amount) }} <br> <small class="text-warning"> Bal: Ksh {{ number_format($companyCustomerServicePlan->Summary['totalBalance']) }} </small> 
											@else
												{{ \Carbon\Carbon::parse($companyCustomerServicePlan->created_at)->format('d M Y') }} <br> <small> at {{ \Carbon\Carbon::parse($companyCustomerServicePlan->created_at)->format('h:i A') }} </small>
											@endif
										</td>

										@if(Auth::user()->hasRole('Administrator') || Auth::user()->hasRole('Client'))
											<td> 
												@if($companyCustomerServicePlan->companyServicePlan && $companyCustomerServicePlan->companyServicePlan->service_plan_id != 1)	
													@if(Auth::user()->hasRole('Administrator') || Auth::user()->can('Administer Company') || Auth::user()->can('Clients.edit'))
														<a href="{{ $companyCustomerServicePlan->id }}" refNo="{{ $companyCustomerServicePlan->ref_no }}" companyServicePlanId="{{ $companyCustomerServicePlan->company_service_plan_id }}" servicePlanId="{{ $companyCustomerServicePlan->companyServicePlan? $companyCustomerServicePlan->companyServicePlan->service_plan_id: '' }}" companyRouterId="{{ $companyCustomerServicePlan->company_router_id }}" username="{{ $companyCustomerServicePlan->profile_name }}" password="{{ $companyCustomerServicePlan->password?? '12345' }}" macAddress="{{ $companyCustomerServicePlan->mac_address }}" staticIpAddress="{{ $companyCustomerServicePlan->static_ip_address }}" companyRouterInterfaceId="{{ $companyCustomerServicePlan->company_router_interface_id }}" subscriptionExpiryDate="{{ \Carbon\Carbon::parse($companyCustomerServicePlan->subscription_expiry_date)->format('Y-m-d') }}" monthlySubAmount="{{ number_format($companyCustomerServicePlan->monthly_sub_amount) }}" class="edit-company-customer-service-plan disabled-btn text-success" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Edit Plan"> <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> 
													@endif

													@if(Auth::user()->hasRole('Administrator') || Auth::user()->can('Administer Company') || Auth::user()->can('Invoices.record_payments'))
														<a href="{{ $companyCustomerServicePlan->id }}" amount="{{ number_format($companyCustomerServicePlan->Summary['totalBalance']) }}" class="create-company-customer-service-plan-payment text-primary disabled-btn" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Record Payments"> <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-cash"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 9m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z" /><path d="M14 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M17 9v-2a2 2 0 0 0 -2 -2h-10a2 2 0 0 0 -2 2v6a2 2 0 0 0 2 2h2" /></svg> </a>
													@endif

													@if(($companyCustomerServicePlan->status == 0 || $companyCustomerServicePlan->status == 2) && (Auth::user()->hasRole('Administrator') || Auth::user()->can('Administer Company') || Auth::user()->can('Clients.activate')))
														<a href="{{ $companyCustomerServicePlan->id }}" class="activate-company-customer-service-plan disabled-btn text-primary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Activate Plan"> <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>
													@elseif($companyCustomerServicePlan->status == 1 && (Auth::user()->hasRole('Administrator') || Auth::user()->can('Administer Company') || Auth::user()->can('Clients.deactivate')))
														<a href="{{ $companyCustomerServicePlan->id }}" class="deactivate-company-customer-service-plan disabled-btn text-warning" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Deactivate Plan"> <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
												@endif

												@if(Auth::user()->hasRole('Administrator') || Auth::user()->can('Administer Company') || Auth::user()->can('Clients.delete'))
													<a href="{{ $companyCustomerServicePlan->id }}" plan="2" class="delete-company-customer-service-plan disabled-btn text-danger" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Delete Plan"> <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-trash"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7l16 0" /><path d="M10 11l0 6" /><path d="M14 11l0 6" /><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" /></svg> </a>
												@endif
											</td>
										@endif
									</tr>

									@include('portal.companies.customers.service-plans.summary')
									<script type="text/javascript">
										document.addEventListener('DOMContentLoaded', function()
										{
											$('.company-customer-service-plan-summary{{ $companyCustomerServicePlan->id }}').click(function(e){
												e.preventDefault();

												$('#company-customer-service-plan-summary{{ $companyCustomerServicePlan->id }}').offcanvas("toggle");
											});
										});
									</script>
								@endforeach
							</tbody>
						</table>

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

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

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

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

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

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

		@include('portal.companies.customers.service-plans.change-expiry-date')
		<script type="text/javascript" src="{{ url('custom/companies/customers/service-plans/change-expiry-date.js') }}"></script>

		@include('portal.companies.service-plans.record-payment')
		<script type="text/javascript" src="{{ url('custom/companies/service-plans/record-payment.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);
			        });
			    });

			    $('.reload-customer-online-offline-status').click(function (e) 
			    {
			        e.preventDefault();

			        // Dispose of tooltip on click
				    const tooltipElement = bootstrap.Tooltip.getInstance(this);
				    if(tooltipElement) {
				        tooltipElement.hide();
				    }

			        let app_url = $('#app_url').val();
			        let csrf_token = $('meta[name="csrf-token"]').attr('content');
			        let record_id = $(this).data('id');

			        let iconContainer = $('.refresh-icon-' + record_id);
			        let originalIcon = iconContainer.html();

			        // Show spinner
			        iconContainer.html('<i class="ti ti-loader ti-spin text-primary"></i>');

			        $.ajax({
			            url: app_url + 'reload-customer-online-offline-status/' + record_id,
			            type: 'GET',
			            dataType: 'JSON',
			            success: function (response) 
			            {
			            	//console.log(response.online);

			                if(response.status === "ok") 
			                {
			                    let statusHTML = '';
			                    if (response.online === 1) 
			                    {
								    statusHTML = `
								        <small>
								            <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Router Online">
								                <i class="menu-icon tf-icons ti ti-toggle-right text-success"></i>
								            </span>
								        </small>`;
								    $('.online-state' + record_id).show();
								} else {
								    statusHTML = `
								        <small>
								            <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Router Offline">
								                <i class="menu-icon tf-icons ti ti-toggle-left text-danger"></i>
								            </span>
								        </small>`;
								}

								$('.online-status' + record_id).html(statusHTML);

								const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
								tooltipTriggerList.forEach(t => new bootstrap.Tooltip(t));
			                }else 
			                {
			                	console.log(data.reason);
			                }
			            },

			            error: function (xhr, status, error) {
						    console.error('AJAX Error:', {
						        status: status,
						        error: error,
						        responseText: xhr.responseText
						    });

						    // Show error message to user
						    let message = 'Error: ' + (xhr.responseJSON?.message || xhr.responseText || error);
						},

			            complete: function () 
			            {
			                // Restore original icon
			                iconContainer.html(originalIcon);
			            }
			        });
			    });
			});

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