@extends('backend.layouts.master')

@section('styles')
	<link rel="stylesheet" href="{{ asset('build/backend/assets/libs/awesome-notifications/style.css') }}">
	<link rel="stylesheet" href="{{ asset('build/backend/assets/libs/choices.js/public/assets/styles/choices.min.css') }}">
	<link rel="stylesheet" href="{{ asset('build/backend/assets/libs/flatpickr/flatpickr.min.css') }}">

	<style>
		.ti-custom-table th {
			padding: .25rem 1.5rem;
		}

		.activity-table .ti-custom-table th,
		.crypto-table .ti-custom-table th {
			font-size: .65rem;
			line-height: 1rem;
			--tw-text-opacity: 1;
			color: #61606090;
			text-transform: none;
		}

		#awn-toast-container {
			z-index: 9999 !important;
		}

		.hs-tooltip {
			display: block !important;
			/* Ensure it renders */
		}

		.ti-main-tooltip-toggle {
			display: inline-block !important;
			opacity: 1 !important;
		}

		.hs-tooltip span {
			display: block;
			background-color: #ff000090;
			/* Debug visibility */
			color: white;
			padding: 5px;
			border-radius: 3px;
		}

		.hs-tooltip span {
			width: auto;
			/* Ensure the width adapts to content */
			max-width: calc(100% - 0px);
			/* Optional: Prevent overly wide tooltips */
			white-space: nowrap;
			/* Prevent wrapping */
		}

		.choices__inner {
			height: 30px !important;
			min-height: 30px !important;
			padding-top: .30rem !important;
			padding-bottom: .30rem !important;
		}
	</style>
@endsection

@section('content')
	<div class="content">
		<!-- Start::main-content -->
		<div class="main-content">

			<div id="users-datatable">

				<div class="grid grid-cols-12 gap-x-6 mt-6">
					<div class="col-span-12 xxl:col-span-6">
						<div class="box overflow-hidden">

								<x-datatable :columns="$userColumns" data-url="{{ route('individuals.data') }}" base-url="{{ url('_cp/individuals') }}"
									export-url="{{ route('users.export') }}" :enable-export="false" :enable-bulk-delete="false" :enable-edit="true" :enable-delete="false"
									instance-key="users_a" />
						</div>

					</div>
					<div class="col-span-12 xxl:col-span-6">
						{{-- @include('backend.crm.individuals.last-updated') --}}
						@include('backend.crm.companies.last-updated')
					</div>
				</div>

			</div>
			<!-- Start::main-content -->
		</div>
	@endsection

	@section('scripts')
		<script src="{{ asset('build/backend/assets/libs/awesome-notifications/index.var.js') }}"></script>

		<script>
			var options = {
				position: 'top-right',
				durations: {
					success: 2000 // Duration in milliseconds, e.g., 8 seconds
				}
			}
			window.notifier = new AWN(options); // Use window to ensure global scope

			document.addEventListener('awn:success', function(event) {
				// The 'message' is passed from the Livewire component
				notifier.success(event.detail.message);
			});
		</script>
	@endsection