@php
	$allowedTabs = ['email', 'sms', 'coupons', 'vouchers'];
	$returnTab = request()->query('tab');
	if (!in_array($returnTab, $allowedTabs, true)) {
		$returnTab = 'email';
	}
	$returnUrl = route('filament.admin.resources.back-office-admin.index', ['tab' => $returnTab]);
@endphp

<div x-data="{ openPreview: false,
		externalTemplate: @entangle('external_template'),
		subjectValue: @entangle('subject') 
	}" 
	class="space-y-6" wire:loading.class="opacity-50 pointer-events-none select-none" wire:target="savePublish">
	@if (session()->has('success'))
		<div class="rounded-lg bg-green-50 text-green-800 px-4 py-3 text-sm">
			{{ session('success') }}
		</div>
	@endif
	@if (session()->has('error'))
		<div class="rounded-lg bg-red-50 text-red-800 px-4 py-3 text-sm">
			{{ session('error') }}
		</div>
	@endif
	<!-- Header actions -->
	<div class="action-bar flex items-center justify-end gap-3">
		<button
			data-internal-action="cancel" 
			type="button" 
			class="inline-flex items-center gap-2 rounded-xl border border-gray-200 bg-white px-4 py-2 text-sm"
			onclick="window.location.href='{{ $returnUrl }}';">
			Cancel
		</button>
		<button type="button" @click="openPreview = true" class="inline-flex items-center gap-2 rounded-xl border border-gray-200 bg-white px-4 py-2 text-sm">
			Preview
		</button>
		<button wire:click="saveDraft" type="button" class="inline-flex items-center gap-2 rounded-xl border border-gray-200 bg-white px-4 py-2 text-sm">
			Save as Draft
		</button>
		<button wire:click="savePublish" type="button" class="inline-flex items-center gap-2 rounded-xl border border-gray-200 bg-white px-4 py-2 text-sm">
			Save &amp; Publish
		</button>
	</div>

	<!-- Main + Sidebar layout -->
	<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
		<div class="lg:col-span-8">
			<div class="bg-white rounded-xl shadow-sm border border-gray-200">

		<div class="p-6 space-y-10">
			<!-- Basic Info -->
			<section x-ref="basic" class="space-y-4">
				<h3 class="text-sm font-semibold text-gray-900">Basic Info</h3>
				<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
					{{-- json_encode($errors->all()) --}}
					<div>
						<label class="block mb-1">Template Name<span class="text-xs text-red-600 mt-1" style="font-size: 18px;">*</span></label>
						<input type="text" wire:model.defer="template_name" @error('template_name') aria-invalid="true" @enderror class="w-full rounded-lg border-gray-300 @error('template_name') border-red-600 ring-1 ring-red-600 focus:border-red-600 focus:ring-red-600 @enderror" placeholder="e.g., Welcome Email" />
						@error('template_name') <div class="text-xs text-red-600 mt-1">{{ $message }}</div> @enderror
					</div>
					<div>
						<label class="block mb-1">Email Subject<span class="text-xs text-red-600 mt-1" style="font-size: 18px;">*</span></label>
						<input type="text" wire:model.live="subject" x-model="subjectValue" @error('subject') aria-invalid="true" @enderror class="w-full rounded-lg border-gray-300 @error('subject') border-red-600 ring-1 ring-red-600 focus:border-red-600 focus:ring-red-600 @enderror" placeholder="Welcome to {{ '{' }}{{ 'companyName' }}{{ '}' }}!" />
						@error('subject') <div class="text-xs text-red-600 mt-1">{{ $message }}</div> @enderror
					</div>
					<div>
						<label class="block mb-1">Event Type</label>
						<input type="text" wire:model.defer="event_type" class="w-full rounded-lg border-gray-300" placeholder="Account Creation" />
					</div>
					<div>
						<label class="block mb-1">Trigger Type</label>
						<select wire:model.defer="trigger_type" class="w-full rounded-lg border-gray-300">
							<option value="">Select Trigger Type</option>
							<option value="event">Event</option>
							<option value="scheduled">Scheduled</option>
							<option value="manual">Manual</option>
						</select>
					</div>
					<div>
						<label class="block mb-1">Category</label>
						<select wire:model.defer="category" class="w-full rounded-lg border-gray-300">
							<option value="">Select Category</option>
							<option>Transactional</option>
							<option>Marketing</option>
							<option>Operational</option>
						</select>
					</div>
					<div>
						<label class="block mb-1">Admin Email (From)</label>
						<input type="email" wire:model.defer="from_email" class="w-full rounded-lg border-gray-300" placeholder="noreply@company.com" />
						@error('from_email') <div class="text-xs text-red-600 mt-1">{{ $message }}</div> @enderror
					</div>
					<div>
						<label class="block mb-1">CC (Optional)</label>
						<input type="text" wire:model.defer="cc" class="w-full rounded-lg border-gray-300" placeholder="team@company.com" />
						@error('cc') <div class="text-xs text-red-600 mt-1">{{ $message }}</div> @enderror
					</div>
					<div>
						<label class="block mb-1">BCC (Optional)</label>
						<input type="text" wire:model.defer="bcc" class="w-full rounded-lg border-gray-300" placeholder="archive@company.com" />
						@error('bcc') <div class="text-xs text-red-600 mt-1">{{ $message }}</div> @enderror
					</div>
				</div>
			</section>

			<!-- Content -->
			<section x-ref="content" class="space-y-4">
				<!-- When NOT using external template -->
                <div x-show="!externalTemplate" x-transition>
					<div style="padding-top: 1rem;">
						<label class="block mb-1">Email Content<span class="text-xs text-red-600 mt-1" style="font-size: 18px;">*</span></label>
						<livewire:back-office.content-rich-editor wire:model="content" />
						@error('content') <div class="text-xs text-red-600 mt-1">{{ $message }}</div> @enderror
					</div>
	            </div>
				<!-- When using external template -->
				<div x-show="externalTemplate" x-transition class="rounded-lg border border-dashed border-gray-300 p-4 bg-gray-50">
					<p class="text-sm text-gray-700">
						You have enabled <strong>External Template</strong>.
						Email content will be managed by your external provider.
					</p>
				</div>
			</section>

			{{-- Removed per requirements: entire "Automation" section --}}

			<!-- Preview & Test -->
			<!-- Inline preview has been moved into the modal (to match Edit page UX) -->
		</div>
			</div>
		</div>
		<!-- Right Sidebar -->
		<div class="lg:col-span-4">
			<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-6">
				<div class="flex items-center justify-between">
					<div>
						<p class="text-sm font-semibold text-gray-900">External Template</p>
						<p class="text-xs text-gray-500">Use an external email service provider template</p>
					</div>
					<!-- Toggle bound to Livewire via Alpine entangle -->
					<!-- <button type="button"
						@click="externalTemplate = !externalTemplate"
						:class="externalTemplate ? 'bg-blue-600 hover:bg-blue-700' : 'bg-gray-200'"
                        class="relative inline-flex h-6 w-10 items-center rounded-full transition-colors duration-200">
						<span class="sr-only">Toggle</span>
						<span
							:class="externalTemplate ? 'translate-x-5' : 'translate-x-1'"
							class="inline-block h-5 w-5 transform rounded-full bg-white shadow transition-transform">
						</span>
					</button> -->
					<button
						x-data="{ state: @entangle('external_template') }"
						x-bind:aria-checked="state?.toString()"
						x-on:click="state = ! state"
						x-bind:class="
							state
								? 'fi-color-custom bg-custom-600 fi-color-primary'
								: 'bg-gray-200 dark:bg-gray-700 fi-color-gray'
						"
						x-bind:style="
							state
								? '--c-600:var(--primary-600)'
								: '--c-600:var(--gray-600)'
						"
						class="fi-fo-toggle relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full
							border-2 border-transparent outline-none transition-colors duration-200 ease-in-out
							focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-1
							disabled:pointer-events-none disabled:opacity-70
							dark:focus-visible:ring-primary-500 dark:focus-visible:ring-offset-gray-900"
						role="switch"
						type="button"
					>
						<span
							class="pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
							x-bind:class="{
								'translate-x-5 rtl:-translate-x-5': state,
								'translate-x-0': !state,
							}"
						>
							<span
								class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
								aria-hidden="true"
								x-bind:class="{
									'opacity-0 ease-out duration-100': state,
									'opacity-100 ease-in duration-200': !state,
								}"
							></span>

							<span
								class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
								aria-hidden="true"
								x-bind:class="{
									'opacity-100 ease-in duration-200': state,
									'opacity-0 ease-out duration-100': !state,
								}"
							></span>
						</span>
					</button>
				</div>

				<div class="rounded-lg border border-gray-200 p-6 bg-gray-50">
					<p class="text-sm font-semibold text-gray-900 mb-2">Quick Tips</p>
					<ul class="list-disc pl-5 space-y-1 text-xs text-gray-700">
						<li>Use clear, action-oriented subject lines</li>
						<li>Include dynamic placeholders for personalization</li>
						<li>Test your template across different devices</li>
						<li>Keep content concise and scannable</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<!-- Preview Modal -->
	<div x-cloak x-show="openPreview" x-transition.opacity class="fixed inset-0 z-[60] flex items-center justify-center">
		<div @click="openPreview=false" class="absolute inset-0 bg-black/40"></div>
		<div class="relative z-[61] w-full max-w-3xl bg-white rounded-xl shadow-xl border border-gray-200">
			<div class="flex items-center justify-between px-4 py-3 border-b border-gray-200">
				<p class="text-sm font-semibold text-gray-900">Preview &amp; Test Email</p>
				<button type="button" @click="openPreview=false" class="text-gray-500 hover:text-gray-700">✕</button>
			</div>
			<div class="p-4">
				{{--:subject="$subject"--}}
				<div class="mb-4">
					<label class="text-sm text-gray-500" style="font-size: 14px;">Subject</label>
					<div class="text-sm font-medium" x-text="subjectValue && subjectValue.trim().length ? subjectValue : '-'" ></div>
				</div>
				<div class="max-h-[70vh] overflow-y-auto">
					<livewire:back-office.html-preview
						wire:model.live="content"
						:subject="$subject"
						:prefill="auth()->user()->email ?? null"
					/>
				</div>
			</div>
			{{--
				<div class="flex items-center justify-end gap-3 px-4 py-3 border-t border-gray-200">
					<button type="button" @click="openPreview=false" class="inline-flex items-center gap-2 rounded-xl border border-gray-200 bg-white px-4 py-2 text-sm">Close</button>
					<button type="button" wire:click="saveDraft" class="inline-flex items-center gap-2 rounded-xl border border-gray-200 bg-white px-4 py-2 text-sm">Save as Draft</button>
					<button type="button" wire:click="savePublish" class="inline-flex items-center gap-2 rounded-xl bg-gray-900 text-white px-4 py-2 text-sm">Save &amp; Publish</button>
				</div>
			--}}
		</div>
</div>

<!-- Full-page loader shown only during Save & Publish -->
<div wire:loading.flex wire:target="savePublish" class="fixed inset-0 z-[90] items-center justify-center">
	<div class="absolute inset-0 bg-white/70 backdrop-blur-sm"></div>
	<div class="relative z-[91] flex flex-col items-center gap-3">
		<svg class="h-10 w-10 animate-spin text-gray-800" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" role="img">
			<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
			<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
		</svg>
		<p class="text-sm text-gray-700">Saving and publishing…</p>
	</div>
</div>

</div>