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

<div x-data="{ openPreview: false }" class="space-y-6">
	@if (session()->has('success'))
		<div class="rounded-lg bg-green-50 text-green-800 px-4 py-3 text-sm">
			{{ session('success') }}
		</div>
	@endif
	<!-- Header actions -->
	{{--<div class="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>--}}

	<div class="sms-template-header">
		<div class="sms-template-header-left">
			<div class="sms-template-title-wrap">
				<svg class="sms-template-title-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
					<path stroke-linecap="round" stroke-linejoin="round" d="M3 8h18M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
				</svg>
				<h1 class="sms-template-title">Create SMS Template</h1>
			</div>
			<p class="sms-template-subtitle">Create SMS template settings and content.</p>
		</div>
		<div class="sms-template-header-actions">
			{{--<button type="button" class="btn-ghost"  @click="openPreview = true">Preview</button>--}}
			<button
				type="button"
				class="btn-ghost"
				onclick="window.location.href='{{ $returnUrl }}';">
				Cancel
			</button>
			<button type="button" class="btn-ghost" wire:click="saveDraft">Save as Draft</button>
			<button type="button" class="btn-primary" wire:click="savePublish">Create Template</button>
		</div>		
	</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-4 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">
							<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" class="w-full rounded-lg border-gray-300" placeholder="e.g., Order Confirmation SMS" />
								@error('template_name') <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="Order Placed" />
							</div>
							<div>
								<label class="block mb-1">Trigger Type<span class="text-xs text-red-600 mt-1" style="font-size: 18px;">*</span></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>
								@error('trigger_type') <div class="text-xs text-red-600 mt-1">{{ $message }}</div> @enderror
							</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>
					</section>

					<!-- Content -->
					<section x-ref="content" class="space-y-4">
						<div style="padding-top: 1rem;">
							<label class="block mb-1">SMS Content<span class="text-xs text-red-600 mt-1" style="font-size: 18px;">*</span></label>
							<textarea wire:model.defer="content" rows="6" class="w-full rounded-lg border-gray-300" placeholder="Write your SMS message..."></textarea>
							@error('content') <div class="text-xs text-red-600 mt-1">{{ $message }}</div> @enderror
							<p class="text-[11px] text-gray-500 mt-1">Keep it concise. Carrier SMS limits may apply.</p>
						</div>
					</section>

					<!-- Preview & Test -->
					{{--<section x-ref="preview" class="space-y-2">
						<h3 class="text-sm font-semibold text-gray-900 sr-only">Preview & Test</h3>
						<div class="rounded-lg border border-gray-200 p-4 bg-white">
							@if(!empty($content))
								<div class="whitespace-pre-wrap text-sm text-gray-800">
									{{ $content }}
								</div>
							@else
								<p class="text-xs text-gray-500">Start typing content above to preview it here.</p>
							@endif
						</div>
					</section>--}}
				</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="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 personalization tokens where available</li>
						<li>Keep messages short and actionable</li>
						<li>Include opt-out text when required</li>
						<li>Respect quiet hours and consent</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-2xl 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</p>
				<button type="button" @click="openPreview=false" class="text-gray-500 hover:text-gray-700">✕</button>
			</div>
			<div class="p-4">
				@if(!empty($content))
					<div class="whitespace-pre-wrap text-sm text-gray-800">
						{{ $content }}
					</div>
				@else
					<p class="text-xs text-gray-500">Start typing content to preview.</p>
				@endif
			</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>
</div>