@extends('layouts.admin')
@section('title',$kind==='form'?'Customer form':'Email designer')
@section('admin-content')
<div class="eyebrow">MAKE IT YOURS</div><h1>{{ $kind==='form'?'Customer form':'Email designer' }}<span class="gold">.</span></h1>
<p>{{ $kind==='form'?'Drag questions into your form. Select a block to edit it. Changes stay in draft until you publish.':'Design your customer emails. Verification codes, reward details and redemption instructions stay protected.' }}</p>
<nav class="designer-tabs"><a class="button small {{ $kind==='email'?'secondary':'' }}" href="{{ route('admin.customer-form') }}">Form builder</a><a class="button small {{ $kind==='form'?'secondary':'' }}" href="{{ route('admin.email-designer') }}">Email designer</a></nav>
<div class="designer-toolbar"><button type="button" class="button small secondary" id="designer-defaults">Restore default</button><button type="button" class="button small secondary" id="designer-preview">Preview</button><button type="button" class="button small secondary" id="designer-draft">Save draft</button><button type="button" class="button small" id="designer-publish">Publish</button><span role="status" aria-live="polite" id="designer-status">Draft editor · publish to apply changes</span></div>
@if($kind==='form')<p class="designer-note">Protected groups keep name, email, receipt verification and consent working. Drag groups to reorder; Submit stays last. Marketing consent, mobile and cat’s name remain optional. Removed questions keep their previous answers.</p>@else<label class="designer-template">Email template<select id="designer-template">@foreach(\App\Services\VisualDesigns::EMAILS as $key=>$label)<option value="{{ $key }}">{{ $label }}</option>@endforeach</select></label>@endif
<noscript><p>Enable JavaScript to use the visual editor.</p>@if($kind==='form')<ul>@foreach($design['blocks'] as $block)<li>{{ $block['label'] }}</li>@endforeach</ul>@endif</noscript>
<div class="visual-designer" id="visual-designer">
<aside class="panel designer-tools"><h2>Add {{ $kind==='form'?'a question':'a block' }}</h2><p>Drag onto the layout, or click to add.</p><div id="designer-toolbox"></div><hr><h3>Appearance</h3><div id="designer-appearance"></div></aside>
<section class="panel designer-layout" aria-label="Design layout"><div class="designer-canvas-head"><h2>Your layout</h2><span id="designer-count"></span></div><div id="designer-blocks" aria-label="Drag blocks to reorder"></div></section>
<aside class="panel designer-properties"><h2>Block settings</h2><div id="designer-properties"><p>Select a block to edit it.</p></div>@if($kind==='email')<hr><h3>Insert a detail</h3><p>Click inside a text field, then choose a detail.</p><div id="designer-tokens"></div><hr><h3>Send a test</h3><label>Email address<input id="designer-test-to" type="email" maxlength="254" value="{{ auth()->user()->email }}"></label><button type="button" class="button small secondary" id="designer-test">Send test email</button><p>Uses sample details and your current draft. Check Email setup first.</p>@endif</aside>
</div>
<dialog id="designer-preview-dialog" data-backend-dialog-ready="1" class="designer-preview-dialog"><div class="designer-preview-bar"><strong>Draft preview</strong><button type="button" id="designer-preview-desktop">Desktop</button><button type="button" id="designer-preview-mobile">Mobile</button><button type="button" id="designer-preview-close">Close ×</button></div><p>Preview only. No receipt submission, verification or reward is created.</p><iframe id="designer-preview-frame" title="Draft preview" sandbox="" referrerpolicy="no-referrer"></iframe></dialog>
<script type="application/json" id="designer-data">{!! json_encode(['kind'=>$kind,'design'=>$design,'defaults'=>$defaults,'revision'=>$revision,'saveUrl'=>route('admin.visual-design.save',$kind),'previewUrl'=>route('admin.email-designer.preview'),'testUrl'=>route('admin.email-designer.test'),'core'=>\App\Services\VisualDesigns::CORE],JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS|JSON_HEX_QUOT) !!}</script>
@endsection
@push('scripts')<link rel="stylesheet" href="{{ asset('wheel/visual-designer.css') }}"><script src="{{ asset('wheel/visual-designer.js') }}" defer></script>@endpush