@php
	$businessCards = collect($businesses ?? [])->map(function ($business, $index) {
		$tradingName = $business->business_trading_name ?? 'Untitled Business';
		$registeredName = $business->business_reg_name ?? null;
		$tradeType = $business->business_trade_type ?? 'Business';
		$registeredDate = $business->business_reg_date ?? null;

		return [
			'id' => $business->getKey() ?? ($index + 1),
			'trading_name' => $tradingName,
			'registered_name' => $registeredName,
			'registration_number' => $business->business_reg_number ?? null,
			'legal_type' => $business->business_legal_type ?? 'Private Company',
			'trade_type' => $tradeType,
			'vat_number' => $business->business_VAT_number ?? null,
			'registration_date' => $registeredDate ? \Illuminate\Support\Carbon::parse($registeredDate)->format('Y-m-d') : '',
			'business_province' => $business->province->name ?? 'Mpumalanga',
			'business_town' => $business->town->town_name ?? 'Mbombela',
			'status' => $index % 2 === 0 ? 'Active' : 'Review',
			'suppliers' => $business->suppliers->map(fn ($supplier) => [
				'id' => $supplier->getKey(),
				'company_name' => $supplier->company_name,
				'contact_person_full_name' => $supplier->name,
				'cell_number' => $supplier->phone,
				'whatsapp_number' => $supplier->whatsapp,
				'email_address' => $supplier->email,
				'is_active' => (bool) $supplier->is_active,
				'date_added' => $supplier->date_added?->format('Y-m-d') ?? '',
				'added_by_name' => $supplier->addedBy?->contact?->full_name ?? $supplier->addedBy?->username,
				'consent_authority_confirmed' => (bool) $supplier->consent_authority_confirmed,
			])->values()->all(),
			'regulatory_contacts' => $business->regulatoryContacts->map(fn ($contact) => [
				'id' => $contact->getKey(),
				'province' => $contact->province?->name ?? '',
				'province_label' => $contact->province?->display_name ?? $contact->province?->name ?? '',
				'police_station_office' => $contact->police_station_office,
				'officer_name' => $contact->officer_name,
				'officer_surname' => $contact->officer_surname,
				'rank' => $contact->rank,
				'designation_type' => $contact->designation_type?->value,
				'designation_label' => $contact->designation_type?->getLabel(),
				'cell_number' => $contact->cell_number,
				'whatsapp_number' => $contact->whatsapp_number,
				'email_address' => $contact->email_address,
				'office_landline' => $contact->office_landline,
				'physical_area_jurisdiction' => $contact->physical_area_jurisdiction,
				'notes' => $contact->notes,
				'is_active' => (bool) $contact->is_active,
				'popia_confirmation_accepted' => true,
				'source_of_information' => $contact->source_of_information?->value,
				'source_label' => $contact->source_of_information?->getLabel(),
				'date_added' => $contact->date_added?->format('Y-m-d') ?? '',
				'last_verified_date' => $contact->last_verified_date?->format('Y-m-d') ?? '',
			])->values()->all(),
		];
	})->values();

	$templateBusiness = [
		'id' => null,
		'state_revision' => 0,
		'trading_name' => '',
		'registered_name' => '',
		'registration_number' => '',
		'legal_type' => '',
		'trade_type' => '',
		'vat_number' => '',
		'registration_date' => '',
		'business_province' => '',
		'business_town' => '',
		'status' => 'Draft',
		'suppliers' => [],
		'regulatory_contacts' => [],
	];

	$totalSuppliers = $businessCards->sum(fn ($business) => count($business['suppliers'] ?? []));
	$provinceOptionMap = collect($provinceOptions ?? [])->mapWithKeys(function ($provinceOption) {
		return [
			$provinceOption['name'] => $provinceOption['towns'] ?? [],
		];
	})->all();
@endphp

<div
	wire:ignore
	x-data="{
		businesses: {{ 
			Illuminate\Support\Js::from($businessCards) 
		}},
		templateBusiness: {{ Illuminate\Support\Js::from($templateBusiness) }},
		legalTypeOptions: {{ Illuminate\Support\Js::from($legalTypeOptions ?? []) }},
		provinceOptions: {{ Illuminate\Support\Js::from($provinceOptions ?? []) }},
		regulatoryContactDesignationTypeOptions: {{ Illuminate\Support\Js::from($regulatoryContactDesignationTypeOptions ?? []) }},
		regulatoryContactSourceOptions: {{ Illuminate\Support\Js::from($regulatoryContactSourceOptions ?? []) }},
		tradeTypeOptions: {{ Illuminate\Support\Js::from($tradeTypeOptions ?? []) }},
		townsByProvince: {{ Illuminate\Support\Js::from($provinceOptionMap) }},
		currentUserName: {{ Illuminate\Support\Js::from(auth('mobile')->user()?->contact?->full_name ?? auth('mobile')->user()?->username ?? 'Current user') }},
		dashboardUrl: {{ Illuminate\Support\Js::from(\Modules\Mobile\Filament\Pages\Dashboard::getUrl(panel: 'mobile')) }},
		editorOpen: false,
		editorMode: 'edit',
		activeSection: 'details',
		showAddSupplierForm: false,
		showAddRegulatoryContactForm: false,
		showSupplierPopiaNoticeDetails: false,
		showRegulatoryContactPopiaNoticeDetails: false,
		isSaving: false,
		saveError: '',
		fieldErrors: {},
		supplierFormMode: 'create',
		regulatoryContactFormMode: 'create',
		editingSupplierIndex: null,
		editingRegulatoryContactIndex: null,
		newSupplier: {
			id: null,
			company_name: '',
			contact_person_full_name: '',
			cell_number: '',
			whatsapp_number: '',
			email_address: '',
			is_active: true,
			date_added: '',
			added_by_name: '',
			consent_authority_confirmed: false,
		},
		newRegulatoryContact: {
			id: null,
			province: '',
			province_label: '',
			police_station_office: '',
			officer_name: '',
			officer_surname: '',
			rank: '',
			designation_type: '',
			cell_number: '',
			whatsapp_number: '',
			email_address: '',
			office_landline: '',
			physical_area_jurisdiction: '',
			notes: '',
			is_active: true,
			popia_confirmation_accepted: false,
			source_of_information: '',
			date_added: '',
			last_verified_date: '',
		},
		selectedBusiness: {{ Illuminate\Support\Js::from($templateBusiness) }},
		todayDate() {
			return new Date().toISOString().slice(0, 10);
		},
		emptySupplier() {
			return {
				id: null,
				company_name: '',
				contact_person_full_name: '',
				cell_number: '',
				whatsapp_number: '',
				email_address: '',
				is_active: true,
				date_added: this.todayDate(),
				added_by_name: this.currentUserName,
				consent_authority_confirmed: false,
			};
		},
		emptyRegulatoryContact() {
			return {
				id: null,
				province: '',
				province_label: '',
				police_station_office: '',
				officer_name: '',
				officer_surname: '',
				rank: '',
				designation_type: '',
				cell_number: '',
				whatsapp_number: '',
				email_address: '',
				office_landline: '',
				physical_area_jurisdiction: '',
				notes: '',
				is_active: true,
				popia_confirmation_accepted: false,
				source_of_information: '',
				date_added: this.todayDate(),
				last_verified_date: '',
			};
		},
		sameBusinessId(left, right) {
			if (left === null || left === undefined || right === null || right === undefined) {
				return false;
			}

			return String(left) === String(right);
		},
		normalizeBusiness(business = {}) {
			return {
				id: business?.id ?? this.templateBusiness.id,
				state_revision: business?.state_revision ?? this.templateBusiness.state_revision,
				trading_name: business?.trading_name ?? this.templateBusiness.trading_name,
				registered_name: business?.registered_name ?? this.templateBusiness.registered_name,
				registration_number: business?.registration_number ?? this.templateBusiness.registration_number,
				legal_type: business?.legal_type ?? this.templateBusiness.legal_type,
				trade_type: business?.trade_type ?? this.templateBusiness.trade_type,
				vat_number: business?.vat_number ?? this.templateBusiness.vat_number,
				registration_date: business?.registration_date ?? this.templateBusiness.registration_date,
				business_province: business?.business_province ?? this.templateBusiness.business_province,
				business_town: business?.business_town ?? this.templateBusiness.business_town,
				status: business?.status ?? this.templateBusiness.status,
				suppliers: (business?.suppliers || []).map((supplier) => ({
					...this.emptySupplier(),
					...supplier,
				})),
				regulatory_contacts: (business?.regulatory_contacts || []).map((contact) => ({
					...this.emptyRegulatoryContact(),
					...contact,
				})),
			};
		},
		resetEditorState() {
			this.activeSection = 'details';
			this.saveError = '';
			this.fieldErrors = {};
			this.showAddSupplierForm = false;
			this.showAddRegulatoryContactForm = false;
			this.showSupplierPopiaNoticeDetails = false;
			this.showRegulatoryContactPopiaNoticeDetails = false;
			this.supplierFormMode = 'create';
			this.regulatoryContactFormMode = 'create';
			this.editingSupplierIndex = null;
			this.editingRegulatoryContactIndex = null;
			this.newSupplier = this.emptySupplier();
			this.newRegulatoryContact = this.emptyRegulatoryContact();
		},
		getTownOptions() {
			if (!this.selectedBusiness?.business_province) {
				return [];
			}

			return this.townsByProvince[this.selectedBusiness.business_province] || [];
		},
		changeProvince(province) {
			if (!this.selectedBusiness) {
				return;
			}

			if (this.selectedBusiness.business_province !== province) {
				this.selectedBusiness.business_town = '';
			}

			this.selectedBusiness.business_province = province;
		},
		openBusiness(businessId) {
			const business = this.businesses.find((item) => this.sameBusinessId(item.id, businessId));

			if (!business) {
				return;
			}

			this.editorMode = 'edit';
			this.resetEditorState();
			this.selectedBusiness = this.normalizeBusiness(business);

			if (!this.getTownOptions().includes(this.selectedBusiness.business_town)) {
				this.selectedBusiness.business_town = '';
			}

			this.editorOpen = true;
		},
		addBusiness() {
			this.editorMode = 'create';
			this.resetEditorState();
			this.selectedBusiness = this.normalizeBusiness(this.templateBusiness);
			this.editorOpen = true;
		},
		openSupplierCreate() {
			this.showAddSupplierForm = true;
			this.showSupplierPopiaNoticeDetails = false;
			this.supplierFormMode = 'create';
			this.editingSupplierIndex = null;
			this.newSupplier = this.emptySupplier();
			delete this.fieldErrors.supplier_consent_authority_confirmed;
		},
		openSupplierEdit(index) {
			if (!this.selectedBusiness || !this.selectedBusiness.suppliers[index]) {
				return;
			}

			this.showAddSupplierForm = true;
			this.showSupplierPopiaNoticeDetails = false;
			this.supplierFormMode = 'edit';
			this.editingSupplierIndex = index;
			this.newSupplier = JSON.parse(JSON.stringify(this.selectedBusiness.suppliers[index]));
			this.newSupplier.consent_authority_confirmed = false;
			delete this.fieldErrors.supplier_consent_authority_confirmed;
		},
		closeSupplierForm() {
			this.showAddSupplierForm = false;
			this.showSupplierPopiaNoticeDetails = false;
			this.supplierFormMode = 'create';
			this.editingSupplierIndex = null;
			this.newSupplier = this.emptySupplier();
		},
		openRegulatoryContactCreate() {
			this.showAddRegulatoryContactForm = true;
			this.showRegulatoryContactPopiaNoticeDetails = false;
			this.regulatoryContactFormMode = 'create';
			this.editingRegulatoryContactIndex = null;
			this.newRegulatoryContact = this.emptyRegulatoryContact();
			delete this.fieldErrors.regulatory_contact_popia_confirmation_accepted;
		},
		openRegulatoryContactEdit(index) {
			if (!this.selectedBusiness || !this.selectedBusiness.regulatory_contacts[index]) {
				return;
			}

			this.showAddRegulatoryContactForm = true;
			this.showRegulatoryContactPopiaNoticeDetails = false;
			this.regulatoryContactFormMode = 'edit';
			this.editingRegulatoryContactIndex = index;
			this.newRegulatoryContact = {
				...this.emptyRegulatoryContact(),
				...JSON.parse(JSON.stringify(this.selectedBusiness.regulatory_contacts[index])),
			};
			this.newRegulatoryContact.popia_confirmation_accepted = false;
			delete this.fieldErrors.regulatory_contact_popia_confirmation_accepted;
		},
		closeRegulatoryContactForm() {
			this.showAddRegulatoryContactForm = false;
			this.showRegulatoryContactPopiaNoticeDetails = false;
			this.regulatoryContactFormMode = 'create';
			this.editingRegulatoryContactIndex = null;
			this.newRegulatoryContact = this.emptyRegulatoryContact();
		},
		addSupplier() {
			if (!this.selectedBusiness) {
				return;
			}

			if (!this.newSupplier.company_name.trim() || !this.newSupplier.contact_person_full_name.trim()) {
				return;
			}

			if (!this.newSupplier.consent_authority_confirmed) {
				this.fieldErrors = {
					...this.fieldErrors,
					supplier_consent_authority_confirmed: ['Accept the consent and authority confirmation before saving supplier details.'],
				};
				this.saveError = 'Accept the consent and authority confirmation before saving supplier details.';

				return;
			}

			if (this.supplierFormMode === 'edit' && this.editingSupplierIndex !== null) {
				this.selectedBusiness.suppliers.splice(this.editingSupplierIndex, 1, {
					id: this.newSupplier.id ?? this.selectedBusiness.suppliers[this.editingSupplierIndex]?.id ?? null,
					company_name: this.newSupplier.company_name,
					contact_person_full_name: this.newSupplier.contact_person_full_name,
					cell_number: this.newSupplier.cell_number,
					whatsapp_number: this.newSupplier.whatsapp_number,
					email_address: this.newSupplier.email_address,
					is_active: !!this.newSupplier.is_active,
					date_added: this.newSupplier.date_added || this.todayDate(),
					added_by_name: this.selectedBusiness.suppliers[this.editingSupplierIndex]?.added_by_name || this.currentUserName,
					consent_authority_confirmed: true,
				});
			} else {
				this.selectedBusiness.suppliers.push({
					id: this.newSupplier.id ?? null,
					company_name: this.newSupplier.company_name,
					contact_person_full_name: this.newSupplier.contact_person_full_name,
					cell_number: this.newSupplier.cell_number,
					whatsapp_number: this.newSupplier.whatsapp_number,
					email_address: this.newSupplier.email_address,
					is_active: !!this.newSupplier.is_active,
					date_added: this.newSupplier.date_added || this.todayDate(),
					added_by_name: this.currentUserName,
					consent_authority_confirmed: true,
				});
			}

			this.closeSupplierForm();
		},
		addRegulatoryContact() {
			if (!this.selectedBusiness) {
				return;
			}

			if (!this.newRegulatoryContact.officer_name.trim() || !this.newRegulatoryContact.officer_surname.trim()) {
				return;
			}

			if (!this.newRegulatoryContact.popia_confirmation_accepted) {
				this.fieldErrors = {
					...this.fieldErrors,
					regulatory_contact_popia_confirmation_accepted: ['Accept the POPIA confirmation before saving regulatory contact details.'],
				};
				this.saveError = 'Accept the POPIA confirmation before saving regulatory contact details.';

				return;
			}

			const regulatoryContact = {
				id: this.newRegulatoryContact.id ?? null,
				province: this.newRegulatoryContact.province,
				province_label: this.provinceOptions.find((province) => province.name === this.newRegulatoryContact.province)?.label || this.newRegulatoryContact.province,
				police_station_office: this.newRegulatoryContact.police_station_office,
				officer_name: this.newRegulatoryContact.officer_name,
				officer_surname: this.newRegulatoryContact.officer_surname,
				rank: this.newRegulatoryContact.rank,
				designation_type: this.newRegulatoryContact.designation_type,
				designation_label: this.regulatoryContactDesignationTypeOptions.find((type) => type.value === this.newRegulatoryContact.designation_type)?.label || '',
				cell_number: this.newRegulatoryContact.cell_number,
				whatsapp_number: this.newRegulatoryContact.whatsapp_number,
				email_address: this.newRegulatoryContact.email_address,
				office_landline: this.newRegulatoryContact.office_landline,
				physical_area_jurisdiction: this.newRegulatoryContact.physical_area_jurisdiction,
				notes: this.newRegulatoryContact.notes,
				is_active: !!this.newRegulatoryContact.is_active,
				popia_confirmation_accepted: true,
				source_of_information: this.newRegulatoryContact.source_of_information,
				source_label: this.regulatoryContactSourceOptions.find((source) => source.value === this.newRegulatoryContact.source_of_information)?.label || '',
				date_added: this.newRegulatoryContact.date_added,
				last_verified_date: this.newRegulatoryContact.last_verified_date,
			};

			if (this.regulatoryContactFormMode === 'edit' && this.editingRegulatoryContactIndex !== null) {
				this.selectedBusiness.regulatory_contacts.splice(this.editingRegulatoryContactIndex, 1, regulatoryContact);
			} else {
				this.selectedBusiness.regulatory_contacts.push(regulatoryContact);
			}

			this.closeRegulatoryContactForm();
		},
		removeSupplier(index) {
			if (!this.selectedBusiness) {
				return;
			}

			this.selectedBusiness.suppliers.splice(index, 1);

			if (this.editingSupplierIndex === index) {
				this.closeSupplierForm();
			}
		},
		removeRegulatoryContact(index) {
			if (!this.selectedBusiness) {
				return;
			}

			this.selectedBusiness.regulatory_contacts.splice(index, 1);

			if (this.editingRegulatoryContactIndex === index) {
				this.closeRegulatoryContactForm();
			}
		},
		closeEditor() {
			this.resetEditorState();
			this.editorOpen = false;
			this.editorMode = 'edit';
			this.selectedBusiness = this.normalizeBusiness(this.templateBusiness);
		},
		async saveBusiness() {
			if (!this.selectedBusiness) {
				return;
			}

			const isCreate = this.editorMode === 'create';

			const tradingName = (this.selectedBusiness.trading_name || '').trim();

			if (!tradingName) {
				this.activeSection = 'details';
				this.saveError = 'Trading name is required.';
				return;
			}

			if (!(this.selectedBusiness.business_province || '').trim()) {
				this.activeSection = 'details';
				this.saveError = 'Province is required.';
				return;
			}

			if (!(this.selectedBusiness.business_town || '').trim()) {
				this.activeSection = 'details';
				this.saveError = 'Town is required.';
				return;
			}

			const payload = JSON.parse(JSON.stringify(this.selectedBusiness));
			payload.trading_name = tradingName;
			payload.registered_name = (payload.registered_name || '').trim();
			payload.registration_number = (payload.registration_number || '').trim();
			payload.legal_type = (payload.legal_type || '').trim();
			payload.trade_type = (payload.trade_type || '').trim();
			payload.vat_number = (payload.vat_number || '').trim();
			payload.business_province = (payload.business_province || '').trim();
			payload.business_town = (payload.business_town || '').trim();

			this.isSaving = true;
			this.saveError = '';
			this.fieldErrors = {};

			try {
				const response = await $wire.saveBusiness(payload, this.editorMode);

				if (!response?.success) {
					const responseErrors = response?.errors || {};
					this.fieldErrors = responseErrors;
					this.saveError = responseErrors.registration_number || responseErrors.vat_number
						? ''
						: response?.message || 'The business was not saved because some details need attention.';
					return;
				}

				const savedBusiness = response.business;

				if (!savedBusiness || !savedBusiness.id) {
					this.saveError = response?.message || 'The business was not saved because the server did not return a valid saved business record.';
					return;
				}

				const normalizedSavedBusiness = this.normalizeBusiness(savedBusiness);
				normalizedSavedBusiness.state_revision = Date.now();

				if (isCreate) {
					this.businesses.unshift(normalizedSavedBusiness);
					this.closeEditor();

					setTimeout(() => {
						window.location.href = this.dashboardUrl;
					}, 300);

					return;
				} else {
					this.businesses = this.businesses.map((business) => {
						if (!this.sameBusinessId(business.id, savedBusiness.id)) {
							return business;
						}

						return normalizedSavedBusiness;
					});
				}

				this.closeEditor();
			} catch (error) {
				const validationErrors = error?.details?.errors || error?.errors || null;
				const serverMessage = error?.details?.message || error?.message || null;
				this.fieldErrors = validationErrors || {};
				const firstValidationMessage = validationErrors
					? Object.values(validationErrors).flat()[0]
					: null;

				this.saveError = validationErrors?.registration_number
					|| validationErrors?.vat_number
					? ''
					: firstValidationMessage || serverMessage || 'The business was not saved because the request could not be completed.';
			} finally {
				this.isSaving = false;
			}
		}
	}"
	class="bg-slate-100 text-slate-900"
>
	<main class="mx-auto max-w-md px-4 py-5">
		<section class="rounded-3xl bg-white/90 p-5 shadow-sm ring-1 ring-black/5 backdrop-blur">
			<div class="flex items-start justify-between gap-3">
				<div>
					<p class="text-sm text-slate-500">Client businesses</p>
					<h1 class="text-2xl font-semibold tracking-tight text-slate-900">Your business workspace</h1>
					<p class="mt-2 text-xs leading-5 text-slate-500">
						View each client business, update the core details, and keep supplier contacts linked in one place.
					</p>
				</div>

				<button
					type="button"
					@click="addBusiness()"
					class="shrink-0 rounded-2xl px-4 py-2 text-xs font-semibold text-white shadow-sm hover:opacity-95"
					style="background: linear-gradient(90deg, #003B40 0%, #2E98A6 100%);"
				>
					Add New
				</button>
			</div>

			<div class="mt-5 grid grid-cols-2 gap-2 text-center">
				<div class="rounded-2xl bg-slate-50 px-3 py-3 ring-1 ring-slate-200">
					<p class="text-[10px] font-semibold uppercase tracking-[0.15em] text-slate-500">Businesses</p>
					<p class="mt-1 text-sm font-semibold text-slate-900" x-text="businesses.length"></p>
				</div>
				<div class="rounded-2xl bg-slate-50 px-3 py-3 ring-1 ring-slate-200">
					<p class="text-[10px] font-semibold uppercase tracking-[0.15em] text-slate-500">Suppliers</p>
					<p class="mt-1 text-sm font-semibold text-slate-900" x-text="businesses.reduce((total, business) => total + (business.suppliers?.length || 0), 0)"></p>
				</div>
			</div>
		</section>

		<section class="mt-5 space-y-4 pb-10">
			<template x-if="businesses.length === 0">
				<div class="rounded-3xl bg-white p-6 text-center shadow-sm ring-1 ring-black/5">
					<div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-emerald-50 text-emerald-700">
						<svg class="mobile-icon-lg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
							<path stroke-linecap="round" stroke-linejoin="round" d="M3 21h18M5 21V7l7-4 7 4v14M9 10h.01M15 10h.01M9 14h.01M15 14h.01" />
						</svg>
					</div>
					<h2 class="mt-4 text-base font-semibold text-slate-900">No businesses yet</h2>
					<p class="mt-2 text-xs leading-5 text-slate-500">Start by adding a new business so the rest of the business workspace can be linked later.</p>
					<button
						type="button"
						@click="addBusiness()"
						class="mt-4 inline-flex rounded-2xl px-4 py-3 text-xs font-semibold text-white shadow-sm hover:opacity-95"
						style="background: linear-gradient(90deg, #003B40 0%, #2E98A6 100%);"
					>
						Add your first business
					</button>
				</div>
			</template>

			<template x-for="business in businesses" :key="`${business.id}-${business.state_revision || 0}`">
				<button
					type="button"
					@click="openBusiness(business.id)"
					class="w-full rounded-3xl bg-white p-5 text-left shadow-sm ring-1 ring-black/5 transition hover:-translate-y-0.5 hover:shadow-md"
				>
					<div class="flex items-start justify-between gap-3">
						<div>
							<div class="flex items-center gap-2">
								<h2 class="text-base font-semibold text-slate-900" x-text="business.trading_name"></h2>
								<span
									class="rounded-full px-2.5 py-1 text-[10px] font-semibold"
									:class="business.status === 'Active' ? 'bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200' : 'bg-amber-50 text-amber-700 ring-1 ring-amber-200'"
									x-text="business.status"
								></span>
							</div>

							<p class="mt-1 text-xs text-slate-500" x-text="business.registered_name || 'Registered name still to be linked'"></p>
							<div class="mt-3 flex flex-wrap gap-2">
								<span class="rounded-full bg-slate-100 px-3 py-1 text-[11px] font-medium text-slate-600" x-text="business.trade_type"></span>
							</div>
						</div>

						<span class="shrink-0 rounded-2xl bg-slate-50 p-3 text-slate-600 ring-1 ring-slate-200">
							<svg class="mobile-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
								<path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-2M9 5a2 2 0 0 0 2 2h2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 7-7m0 0H13m3 0v3" />
							</svg>
						</span>
					</div>

					<div class="mt-5 grid grid-cols-2 gap-2 text-center">
						<div class="rounded-2xl bg-slate-50 px-3 py-3 ring-1 ring-slate-200">
							<p class="text-[10px] font-semibold uppercase tracking-[0.15em] text-slate-500">Location</p>
							<p class="mt-1 text-sm font-semibold text-slate-900" x-text="business.business_town || business.business_province"></p>
						</div>
						<div class="rounded-2xl bg-slate-50 px-3 py-3 ring-1 ring-slate-200">
							<p class="text-[10px] font-semibold uppercase tracking-[0.15em] text-slate-500">Suppliers</p>
							<p class="mt-1 text-sm font-semibold text-slate-900" x-text="business.suppliers.length"></p>
						</div>
					</div>
				</button>
			</template>
		</section>
	</main>

	<div
		x-cloak
		x-show="editorOpen"
		class="fixed inset-0 z-40 bg-slate-950/40 backdrop-blur-sm"
		@click="closeEditor()"
	></div>

	<div
		x-cloak
		x-show="editorOpen"
		class="fixed inset-0 z-50 overflow-y-auto px-4 pb-[calc(9rem+env(safe-area-inset-bottom))] pt-[calc(5.5rem+env(safe-area-inset-top))]"
	>
		<aside
			class="mx-auto w-full max-w-md rounded-4xl bg-white px-4 pb-6 pt-4 shadow-[0_18px_50px_rgba(15,23,42,0.18)] ring-1 ring-black/5"
			@click.stop
		>

		<div class="flex items-start justify-between gap-3">
			<div>
				<p class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500" x-text="editorMode === 'create' ? 'Add business' : 'Edit business'"></p>
				<h2 class="mt-1 text-lg font-semibold text-slate-900" x-text="selectedBusiness?.trading_name || 'New business'"></h2>
				<p class="mt-1 text-xs text-slate-500">Update the business details and save them to the client workspace.</p>
			</div>

			<button type="button" @click="closeEditor()" class="rounded-2xl bg-slate-100 p-2 text-slate-600 ring-1 ring-slate-200">
				<svg class="mobile-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
					<path stroke-linecap="round" stroke-linejoin="round" d="m6 6 12 12M18 6 6 18" />
				</svg>
			</button>
		</div>

		<p x-show="saveError" x-text="saveError" class="mt-3 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-xs font-medium text-rose-700"></p>

		<div class="mt-5 -mx-1 flex gap-2 overflow-x-auto px-1 py-2">
			<button type="button" @click="activeSection = 'details'" class="rounded-full px-4 py-2 text-xs font-semibold whitespace-nowrap"
				:class="activeSection === 'details' ? 'bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200' : 'bg-slate-100 text-slate-600 ring-1 ring-slate-200'">
				Details
			</button>
			<button type="button" @click="activeSection = 'suppliers'" class="rounded-full px-4 py-2 text-xs font-semibold whitespace-nowrap"
				:class="activeSection === 'suppliers' ? 'bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200' : 'bg-slate-100 text-slate-600 ring-1 ring-slate-200'">
				Suppliers
			</button>
			<button type="button" @click="activeSection = 'regulatory_contacts'" class="rounded-full px-4 py-2 text-xs font-semibold whitespace-nowrap"
				:class="activeSection === 'regulatory_contacts' ? 'bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200' : 'bg-slate-100 text-slate-600 ring-1 ring-slate-200'">
				Regulatory Contacts
			</button>
		</div>

		<div class="mt-5 pb-2">
			<div x-show="activeSection === 'details'" class="space-y-4">
				<div>
					<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Registration number</label>
					<div class="relative">
						<span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-slate-400">
							<svg class="mobile-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
								<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6M7 4h8l4 4v12a1 1 0 0 1-1 1H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z" />
							</svg>
						</span>
						<input
							type="text"
							x-model="selectedBusiness.registration_number"
							@input="delete fieldErrors.registration_number; saveError = ''"
							class="w-full rounded-2xl border py-3 pl-12 pr-4 text-sm text-slate-700 outline-none focus:ring-2"
							:class="fieldErrors.registration_number ? 'border-rose-300 focus:border-rose-500 focus:ring-rose-100' : 'border-slate-200 focus:border-emerald-500 focus:ring-emerald-100'"
						>
					</div>
					<p
						x-show="fieldErrors.registration_number"
						x-text="fieldErrors.registration_number ? fieldErrors.registration_number[0] : ''"
						class="mt-2 text-xs font-medium text-rose-600"
					></p>
				</div>

				<div>
					<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Trading name</label>
					<div class="relative">
						<span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-slate-400">
							<svg class="mobile-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
								<path stroke-linecap="round" stroke-linejoin="round" d="M3 21h18M5 21V7l7-4 7 4v14M9 10h.01M15 10h.01M9 14h.01M15 14h.01" />
							</svg>
						</span>
						<input type="text" x-model="selectedBusiness.trading_name" class="w-full rounded-2xl border border-slate-200 py-3 pl-12 pr-4 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100">
					</div>
				</div>

				<div>
					<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Registered name</label>
					<div class="relative">
						<span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-slate-400">
							<svg class="mobile-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
								<path stroke-linecap="round" stroke-linejoin="round" d="M4 7.5A2.5 2.5 0 0 1 6.5 5h11A2.5 2.5 0 0 1 20 7.5v9a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 16.5v-9ZM8 9h8M8 13h8" />
							</svg>
						</span>
						<input type="text" x-model="selectedBusiness.registered_name" class="w-full rounded-2xl border border-slate-200 py-3 pl-12 pr-4 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100">
					</div>
				</div>

				<div>
					<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Legal type</label>
					<select x-model="selectedBusiness.legal_type" class="w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100">
						<option value="">Select a legal type</option>
						<template x-for="legalType in legalTypeOptions" :key="legalType.value">
							<option :value="legalType.value" x-text="legalType.label"></option>
						</template>
					</select>
				</div>

				<div>
					<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Trade type</label>
					<select x-model="selectedBusiness.trade_type" class="w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100">
						<option value="">Select a trade type</option>
						<template x-for="tradeType in tradeTypeOptions" :key="tradeType.value">
							<option :value="tradeType.value" x-text="tradeType.label"></option>
						</template>
					</select>
				</div>

				<div class="rounded-2xl bg-slate-50 px-4 py-4 ring-1 ring-slate-200">
					<div class="grid grid-cols-2 gap-3">
						<div>
							<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">VAT number</label>
							<div class="relative">
								<span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-slate-400">
									<svg class="mobile-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
										<path stroke-linecap="round" stroke-linejoin="round" d="M3 7h18M6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm3 7h6m-6 4h4" />
									</svg>
								</span>
								<input
									type="text"
									x-model="selectedBusiness.vat_number"
									@input="delete fieldErrors.vat_number; saveError = ''"
									class="w-full rounded-2xl border bg-white py-3 pl-12 pr-4 text-sm text-slate-700 outline-none focus:ring-2"
									:class="fieldErrors.vat_number ? 'border-rose-300 focus:border-rose-500 focus:ring-rose-100' : 'border-slate-200 focus:border-emerald-500 focus:ring-emerald-100'"
								>
							</div>
							<p
								x-show="fieldErrors.vat_number"
								x-text="fieldErrors.vat_number ? fieldErrors.vat_number[0] : ''"
								class="mt-2 text-xs font-medium text-rose-600"
							></p>
						</div>
						<div>
							<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Registration date</label>
							<div class="relative">
								<span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-slate-400">
									<svg class="mobile-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
										<path stroke-linecap="round" stroke-linejoin="round" d="M8 2v4M16 2v4M3 10h18M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z" />
									</svg>
								</span>
								<input type="date" x-model="selectedBusiness.registration_date" class="w-full rounded-2xl border border-slate-200 bg-white py-3 pl-12 pr-4 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100">
							</div>
						</div>
						<div>
							<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Business province</label>
							<select x-model="selectedBusiness.business_province" @change="changeProvince($event.target.value)" class="w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100">
								<option value="">Select a province</option>
								<template x-for="province in provinceOptions" :key="province.name">
									<option :value="province.name" x-text="province.label"></option>
								</template>
							</select>
						</div>
						<div>
							<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Business town</label>
							<select x-model="selectedBusiness.business_town" :disabled="!selectedBusiness.business_province" class="w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400">
								<option value="" x-text="selectedBusiness.business_province ? 'Select a town' : 'Select a province first'"></option>
								<template x-for="town in getTownOptions()" :key="town">
									<option :value="town" x-text="town"></option>
								</template>
							</select>
						</div>
					</div>
				</div>
			</div>

			<div x-show="activeSection === 'suppliers'" class="space-y-3">
				<div class="flex items-center justify-between rounded-2xl bg-slate-50 px-4 py-3 ring-1 ring-slate-200">
					<div>
						<p class="text-sm font-semibold text-slate-900">Suppliers</p>
						<p class="mt-1 text-xs text-slate-500">Keep supplier companies and representative contacts in one clean list for this business.</p>
					</div>
					<button
						type="button"
						@click="openSupplierCreate()"
						class="rounded-xl px-3 py-2 text-[10px] font-semibold text-white"
						style="background: linear-gradient(90deg, #003B40 0%, #2E98A6 100%);"
					>
						Add Supplier
					</button>
				</div>

				<div x-show="showAddSupplierForm" class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
					<div class="mb-4 flex items-center justify-between gap-3">
						<div>
							<p class="text-sm font-semibold text-slate-900" x-text="supplierFormMode === 'edit' ? 'Edit supplier' : 'Add supplier'"></p>
							<p class="mt-1 text-xs text-slate-500">Update the supplier company and representative details for this business.</p>
						</div>
					</div>
					<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
						<div class="sm:col-span-2">
							<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Supplier company name</label>
							<div class="relative">
								<span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-slate-400">
									<svg class="mobile-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
										<path stroke-linecap="round" stroke-linejoin="round" d="M3 21h18M5 21V7l7-4 7 4v14M9 10h.01M15 10h.01M9 14h.01M15 14h.01" />
									</svg>
								</span>
								<input type="text" x-model="newSupplier.company_name" class="w-full rounded-2xl border border-slate-200 py-3 pl-12 pr-4 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100">
							</div>
						</div>
						<div class="sm:col-span-2">
							<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Contact person full name and surname</label>
							<div class="relative">
								<span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-slate-400">
									<svg class="mobile-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
										<path stroke-linecap="round" stroke-linejoin="round" d="M15 19a4 4 0 0 0-8 0M11 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm9 8a5 5 0 0 0-7-4.58" />
									</svg>
								</span>
								<input type="text" x-model="newSupplier.contact_person_full_name" class="w-full rounded-2xl border border-slate-200 py-3 pl-12 pr-4 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100">
							</div>
						</div>
						<div>
							<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Cell number</label>
							<div class="relative">
								<span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-slate-400">
									<svg class="mobile-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
										<path stroke-linecap="round" stroke-linejoin="round" d="M5 4h4l2 5-2.5 1.5a15 15 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2h-1C9.82 21 3 14.18 3 6V5a1 1 0 0 1 1-1Z" />
									</svg>
								</span>
								<input type="text" x-model="newSupplier.cell_number" class="w-full rounded-2xl border border-slate-200 py-3 pl-12 pr-4 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100">
							</div>
						</div>
						<div>
							<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">WhatsApp number</label>
							<div class="relative">
								<span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-slate-400">
									<svg class="mobile-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
										<path stroke-linecap="round" stroke-linejoin="round" d="M8 19l-4 1 1-4a8 8 0 1 1 3 2.5" />
									</svg>
								</span>
								<input type="text" x-model="newSupplier.whatsapp_number" class="w-full rounded-2xl border border-slate-200 py-3 pl-12 pr-4 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100">
							</div>
						</div>
						<div class="sm:col-span-2">
							<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Email address</label>
							<div class="relative">
								<span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-slate-400">
									<svg class="mobile-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
										<path stroke-linecap="round" stroke-linejoin="round" d="M4 7l8 6 8-6M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z" />
									</svg>
								</span>
								<input type="email" x-model="newSupplier.email_address" class="w-full rounded-2xl border border-slate-200 py-3 pl-12 pr-4 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100">
							</div>
						</div>
						<div>
							<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Date added</label>
							<input type="date" x-model="newSupplier.date_added" class="w-full rounded-2xl border border-slate-200 px-4 py-3 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100">
						</div>
						<div class="flex items-end">
							<label class="flex w-full items-center gap-3 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-medium text-slate-700 ring-1 ring-slate-100">
								<input type="checkbox" x-model="newSupplier.is_active" class="h-4 w-4 rounded border-slate-300 text-emerald-600 focus:ring-emerald-500">
								<span>Active supplier contact</span>
							</label>
						</div>
						<div class="sm:col-span-2">
							<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Added by</label>
							<div class="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700" x-text="newSupplier.added_by_name || currentUserName"></div>
						</div>
					</div>

					<div class="mt-4">
						@include('mobile::livewire.mobile.partials.contact-popia-confirmation', [
							'toggleModel' => 'showSupplierPopiaNoticeDetails',
							'checkboxModel' => 'newSupplier.consent_authority_confirmed',
							'errorKey' => 'supplier_consent_authority_confirmed',
						])
					</div>

					<div class="mt-4 flex gap-3">
						<button
							type="button"
							@click="closeSupplierForm()"
							class="flex-1 rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm font-semibold text-slate-700 ring-1 ring-slate-200"
						>
							Cancel
						</button>
						<button
							type="button"
							@click="addSupplier()"
							class="flex-1 rounded-2xl px-4 py-3 text-sm font-semibold text-white shadow-sm"
							style="background: linear-gradient(90deg, #003B40 0%, #2E98A6 100%);"
						>
							<span x-text="supplierFormMode === 'edit' ? 'Save Supplier' : 'Add Supplier'"></span>
						</button>
					</div>
				</div>

				<div class="space-y-3">
					<template x-if="(selectedBusiness?.suppliers ?? []).length === 0">
						<div class="rounded-2xl border border-dashed border-slate-300 bg-slate-50 px-4 py-6 text-center">
							<p class="text-sm font-semibold text-slate-900">No suppliers linked</p>
							<p class="mt-1 text-xs text-slate-500">Add the supplier companies and representative contacts you want to save against this business.</p>
						</div>
					</template>
					<template x-for="(item, index) in selectedBusiness?.suppliers ?? []" :key="item.id ?? `new-${index}`">
						<div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
							<div class="flex items-start justify-between gap-3">
								<div>
									<div class="flex flex-wrap items-center gap-2">
										<p class="text-sm font-semibold text-slate-900" x-text="item.company_name || 'Supplier company'"></p>
										<span class="rounded-full px-2.5 py-1 text-[10px] font-semibold"
											:class="item.is_active ? 'bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200' : 'bg-slate-100 text-slate-600 ring-1 ring-slate-200'"
											x-text="item.is_active ? 'Active' : 'Inactive'"></span>
									</div>
									<p class="mt-1 text-xs text-slate-500" x-text="item.contact_person_full_name || 'Representative contact'"></p>
								</div>
								<div class="flex items-center gap-2">
									<button
										type="button"
										@click="openSupplierEdit(index)"
										class="rounded-xl bg-white px-3 py-2 text-[10px] font-semibold text-[#2E98A6] ring-1 ring-slate-200"
									>
										Edit
									</button>
									<button
										type="button"
										@click="removeSupplier(index)"
										class="rounded-xl bg-rose-50 px-3 py-2 text-[10px] font-semibold text-rose-600 ring-1 ring-rose-100"
									>
										Remove
									</button>
								</div>
							</div>

							<div class="mt-4 space-y-2">
								<div class="flex items-center justify-between border-b border-slate-100 py-2">
									<span class="text-xs font-semibold text-slate-500">Cell number</span>
									<span class="text-sm text-slate-800" x-text="item.cell_number || '-' "></span>
								</div>
								<div class="flex items-center justify-between border-b border-slate-100 py-2">
									<span class="text-xs font-semibold text-slate-500">WhatsApp number</span>
									<span class="text-sm text-slate-800" x-text="item.whatsapp_number || '-' "></span>
								</div>
								<div class="flex items-center justify-between border-b border-slate-100 py-2">
									<span class="text-xs font-semibold text-slate-500">Date added</span>
									<span class="text-sm text-slate-800" x-text="item.date_added || '-' "></span>
								</div>
								<div class="flex items-center justify-between border-b border-slate-100 py-2">
									<span class="text-xs font-semibold text-slate-500">Added by</span>
									<span class="text-sm text-slate-800" x-text="item.added_by_name || '-' "></span>
								</div>
								<div class="flex items-start justify-between gap-3 py-2">
									<span class="text-xs font-semibold text-slate-500">Email address</span>
									<span class="text-right text-sm text-slate-800 break-all" x-text="item.email_address || '-' "></span>
								</div>
							</div>
						</div>
					</template>
				</div>
			</div>

			<div x-show="activeSection === 'regulatory_contacts'" class="space-y-3">
				<div class="flex items-center justify-between rounded-2xl bg-slate-50 px-4 py-3 ring-1 ring-slate-200">
					<div>
						<p class="text-sm font-semibold text-slate-900">Appointed Liquor Officers / Regulatory Contacts</p>
						<p class="mt-1 text-xs text-slate-500">Keep the regulatory contacts for this business linked in one place.</p>
					</div>
					<button
						type="button"
						@click="openRegulatoryContactCreate()"
						class="rounded-xl px-3 py-2 text-[10px] font-semibold text-white"
						style="background: linear-gradient(90deg, #003B40 0%, #2E98A6 100%);"
					>
						Add Contact
					</button>
				</div>

				<div x-show="showAddRegulatoryContactForm" class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
					<div class="mb-4 flex items-center justify-between gap-3">
						<div>
							<p class="text-sm font-semibold text-slate-900" x-text="regulatoryContactFormMode === 'edit' ? 'Edit contact' : 'Add contact'"></p>
							<p class="mt-1 text-xs text-slate-500">Capture the appointed liquor officer or regulatory contact details for this business.</p>
						</div>
					</div>

					<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
						<div>
							<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Province</label>
							<select x-model="newRegulatoryContact.province" class="w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100">
								<option value="">Select a province</option>
								<template x-for="province in provinceOptions" :key="`regulatory-${province.name}`">
									<option :value="province.name" x-text="province.label"></option>
								</template>
							</select>
						</div>
						<div>
							<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Police station / office</label>
							<div class="relative">
								<span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-slate-400" data-regulatory-input-icon="station">
									<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
										<path d="M3 21h18"></path>
										<path d="M5 21V8l7-4 7 4v13"></path>
										<path d="M9 10h6"></path>
									</svg>
								</span>
								<input type="text" x-model="newRegulatoryContact.police_station_office" class="w-full rounded-2xl border border-slate-200 px-4 py-3 pl-11 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100">
							</div>
						</div>
						<div>
							<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Officer name</label>
							<div class="relative">
								<span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-slate-400" data-regulatory-input-icon="officer-name">
									<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
										<path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"></path>
										<path d="M5 20a7 7 0 0 1 14 0"></path>
									</svg>
								</span>
								<input type="text" x-model="newRegulatoryContact.officer_name" class="w-full rounded-2xl border border-slate-200 px-4 py-3 pl-11 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100">
							</div>
						</div>
						<div>
							<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Officer surname</label>
							<div class="relative">
								<span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-slate-400" data-regulatory-input-icon="officer-surname">
									<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
										<path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"></path>
										<path d="M5 20a7 7 0 0 1 14 0"></path>
									</svg>
								</span>
								<input type="text" x-model="newRegulatoryContact.officer_surname" class="w-full rounded-2xl border border-slate-200 px-4 py-3 pl-11 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100">
							</div>
						</div>
						<div>
							<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Rank</label>
							<div class="relative">
								<span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-slate-400" data-regulatory-input-icon="rank">
									<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
										<path d="m12 3 2.6 5.27 5.82.85-4.21 4.1.99 5.78L12 16.98 6.8 19l.99-5.78-4.21-4.1 5.82-.85L12 3Z"></path>
									</svg>
								</span>
								<input type="text" x-model="newRegulatoryContact.rank" class="w-full rounded-2xl border border-slate-200 px-4 py-3 pl-11 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100">
							</div>
						</div>
						<div>
							<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Designation type</label>
							<select x-model="newRegulatoryContact.designation_type" class="w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100">
								<option value="">Select a designation</option>
								<template x-for="designation in regulatoryContactDesignationTypeOptions" :key="designation.value">
									<option :value="designation.value" x-text="designation.label"></option>
								</template>
							</select>
						</div>
						<div>
							<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Cell number</label>
							<div class="relative">
								<span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-slate-400" data-regulatory-input-icon="cell">
									<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
										<rect x="7" y="2.75" width="10" height="18.5" rx="2"></rect>
										<path d="M10 6.5h4"></path>
										<path d="M11.25 17.5h1.5"></path>
									</svg>
								</span>
								<input type="text" x-model="newRegulatoryContact.cell_number" class="w-full rounded-2xl border border-slate-200 px-4 py-3 pl-11 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100">
							</div>
						</div>
						<div>
							<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">WhatsApp number</label>
							<div class="relative">
								<span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-slate-400" data-regulatory-input-icon="whatsapp">
									<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
										<path d="M7.5 18.5 4 20l1.5-3.5A8 8 0 1 1 20 12a8 8 0 0 1-12.5 6.5Z"></path>
										<path d="M9.75 9.5c.3-.62.56-.65.82-.66.21 0 .45 0 .68.01.18.01.42-.07.64.47.22.54.76 1.87.83 2.01.07.14.12.31.02.5-.1.19-.14.31-.28.47-.14.16-.3.35-.43.46-.14.12-.28.25-.12.49.15.25.68 1.12 1.46 1.82 1 .89 1.84 1.17 2.1 1.3.26.12.41.1.56-.06.15-.16.64-.74.81-1 .17-.25.34-.21.58-.13.23.08 1.48.7 1.73.83.26.12.43.18.49.28.06.1.06.59-.14 1.16-.2.57-1.16 1.09-1.58 1.16-.41.07-.94.1-1.51-.09-.35-.12-.79-.26-1.36-.5-2.39-1.04-3.95-3.48-4.07-3.64-.12-.16-.97-1.29-.97-2.46 0-1.17.62-1.74.84-1.98Z"></path>
									</svg>
								</span>
								<input type="text" x-model="newRegulatoryContact.whatsapp_number" class="w-full rounded-2xl border border-slate-200 px-4 py-3 pl-11 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100">
							</div>
						</div>
						<div class="sm:col-span-2">
							<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Email address</label>
							<div class="relative">
								<span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-slate-400" data-regulatory-input-icon="email">
									<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
										<path d="M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 17.5v-11Z"></path>
										<path d="m5.5 7 6.5 5 6.5-5"></path>
									</svg>
								</span>
								<input type="email" x-model="newRegulatoryContact.email_address" class="w-full rounded-2xl border border-slate-200 px-4 py-3 pl-11 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100">
							</div>
						</div>
						<div>
							<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Office landline</label>
							<div class="relative">
								<span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-slate-400" data-regulatory-input-icon="office-landline">
									<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
										<path d="M4.75 7.75A2.75 2.75 0 0 1 7.5 5h9A2.75 2.75 0 0 1 19.25 7.75v8.5A2.75 2.75 0 0 1 16.5 19h-9a2.75 2.75 0 0 1-2.75-2.75v-8.5Z"></path>
										<path d="M8 9.5h8M8 13h3"></path>
									</svg>
								</span>
								<input type="text" x-model="newRegulatoryContact.office_landline" class="w-full rounded-2xl border border-slate-200 px-4 py-3 pl-11 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100">
							</div>
						</div>
						<div>
							<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Source of information</label>
							<select x-model="newRegulatoryContact.source_of_information" class="w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100">
								<option value="">Select a source</option>
								<template x-for="source in regulatoryContactSourceOptions" :key="source.value">
									<option :value="source.value" x-text="source.label"></option>
								</template>
							</select>
						</div>
						<div>
							<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Date added</label>
							<input type="date" x-model="newRegulatoryContact.date_added" class="w-full rounded-2xl border border-slate-200 px-4 py-3 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100">
						</div>
						<div>
							<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Last verified date</label>
							<input type="date" x-model="newRegulatoryContact.last_verified_date" class="w-full rounded-2xl border border-slate-200 px-4 py-3 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100">
						</div>
						<div class="sm:col-span-2">
							<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Physical area / jurisdiction</label>
							<div class="relative">
								<span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-slate-400" data-regulatory-input-icon="jurisdiction">
									<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
										<path d="M12 21s6-4.35 6-10a6 6 0 1 0-12 0c0 5.65 6 10 6 10Z"></path>
										<path d="M12 13.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"></path>
									</svg>
								</span>
								<input type="text" x-model="newRegulatoryContact.physical_area_jurisdiction" class="w-full rounded-2xl border border-slate-200 px-4 py-3 pl-11 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100">
							</div>
						</div>
						<div class="sm:col-span-2">
							<label class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Notes</label>
							<textarea x-model="newRegulatoryContact.notes" rows="3" class="w-full rounded-2xl border border-slate-200 px-4 py-3 text-sm text-slate-700 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100"></textarea>
						</div>
						<label class="sm:col-span-2 flex items-center gap-3 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700">
							<input type="checkbox" x-model="newRegulatoryContact.is_active" class="h-4 w-4 rounded border-slate-300 text-emerald-600 focus:ring-emerald-500">
							<span>Contact is active</span>
						</label>
					</div>

					<div class="mt-4">
						@include('mobile::livewire.mobile.partials.contact-popia-confirmation', [
							'toggleModel' => 'showRegulatoryContactPopiaNoticeDetails',
							'checkboxModel' => 'newRegulatoryContact.popia_confirmation_accepted',
							'errorKey' => 'regulatory_contact_popia_confirmation_accepted',
						])
					</div>

					<div class="mt-4 flex gap-3">
						<button
							type="button"
							@click="closeRegulatoryContactForm()"
							class="flex-1 rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm font-semibold text-slate-700 ring-1 ring-slate-200"
						>
							Cancel
						</button>
						<button
							type="button"
							@click="addRegulatoryContact()"
							class="flex-1 rounded-2xl px-4 py-3 text-sm font-semibold text-white shadow-sm"
							style="background: linear-gradient(90deg, #003B40 0%, #2E98A6 100%);"
						>
							<span x-text="regulatoryContactFormMode === 'edit' ? 'Save Contact' : 'Add Contact'"></span>
						</button>
					</div>
				</div>

				<div class="space-y-3">
					<template x-if="(selectedBusiness?.regulatory_contacts ?? []).length === 0">
						<div class="rounded-2xl border border-dashed border-slate-300 bg-slate-50 px-4 py-6 text-center">
							<p class="text-sm font-semibold text-slate-900">No regulatory contacts linked</p>
							<p class="mt-1 text-xs text-slate-500">Add the appointed liquor officer or regulatory contacts you want to keep against this business.</p>
						</div>
					</template>
					<template x-for="(item, index) in selectedBusiness?.regulatory_contacts ?? []" :key="item.id ?? `contact-${index}`">
						<div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
							<div class="flex items-start justify-between gap-3">
								<div>
									<p class="text-sm font-semibold text-slate-900" x-text="`${item.officer_name || ''} ${item.officer_surname || ''}`.trim() || 'Regulatory contact'"></p>
									<p class="mt-1 text-xs text-slate-500" x-text="item.designation_label || 'Regulatory contact'"></p>
								</div>
								<div class="flex gap-2">
									<button
										type="button"
										@click="openRegulatoryContactEdit(index)"
										class="rounded-xl bg-white px-3 py-2 text-[10px] font-semibold text-[#2E98A6] ring-1 ring-slate-200"
									>
										Edit
									</button>
									<button
										type="button"
										@click="removeRegulatoryContact(index)"
										class="rounded-xl bg-rose-50 px-3 py-2 text-[10px] font-semibold text-rose-600 ring-1 ring-rose-100"
									>
										Remove
									</button>
								</div>
							</div>

							<div class="mt-4 space-y-2">
								<div class="flex items-center justify-between border-b border-slate-100 py-2">
									<span class="text-xs font-semibold text-slate-500">Province</span>
									<span class="text-right text-sm text-slate-800" x-text="item.province_label || item.province || '-' "></span>
								</div>
								<div class="flex items-center justify-between border-b border-slate-100 py-2">
									<span class="text-xs font-semibold text-slate-500">Station / office</span>
									<span class="text-right text-sm text-slate-800" x-text="item.police_station_office || '-' "></span>
								</div>
								<div class="flex items-center justify-between border-b border-slate-100 py-2">
									<span class="text-xs font-semibold text-slate-500">Cell</span>
									<span class="text-right text-sm text-slate-800" x-text="item.cell_number || '-' "></span>
								</div>
								<div class="flex items-center justify-between border-b border-slate-100 py-2">
									<span class="text-xs font-semibold text-slate-500">Source</span>
									<span class="text-right text-sm text-slate-800" x-text="item.source_label || '-' "></span>
								</div>
								<div class="flex items-start justify-between gap-3 py-2">
									<span class="text-xs font-semibold text-slate-500">Email</span>
									<span class="text-right text-sm text-slate-800 break-all" x-text="item.email_address || '-' "></span>
								</div>
							</div>
						</div>
					</template>
				</div>
			</div>

		</div>

		<div class="mt-5 flex gap-3">
			<button
				type="button"
				class="flex-1 rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm font-semibold text-slate-700 ring-1 ring-slate-200"
				@click="closeEditor()"
			>
				Cancel
			</button>
			<button
				type="button"
				class="flex-1 rounded-2xl px-4 py-3 text-sm font-semibold text-white shadow-sm hover:opacity-95"
				@click="saveBusiness()"
				:disabled="isSaving"
				style="background: linear-gradient(90deg, #003B40 0%, #2E98A6 100%);"
			>
				<span x-text="isSaving ? 'Saving...' : (editorMode === 'create' ? 'Save' : 'Save Layout')"></span>
			</button>
		</div>
		</aside>
	</div>
</div>

@push('styles')
	<style>
		[x-cloak] {
			display: none !important;
		}
	</style>
@endpush