@extends('admin.layouts.app')

@section('title', ($isEdit ? __('admin.notification_center.edit_title') : __('admin.notification_center.new')) . ' — ' . __('admin.brand.name'))
@section('page_title', __('admin.notification_center.title'))

@php
    $waLogo = '<svg viewBox="0 0 24 24" width="20" height="20" fill="#25D366" aria-hidden="true">'
        . '<path d="M17.5 14.38c-.3-.15-1.77-.87-2.04-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.16-.17.2-.35.22-.64.08-.3-.15-1.26-.47-2.4-1.48-.89-.8-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.14-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51l-.57-.01c-.2 0-.52.07-.79.37-.27.3-1.04 1.01-1.04 2.48 0 1.46 1.07 2.88 1.22 3.08.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.69.62.71.23 1.36.2 1.87.12.57-.08 1.77-.72 2.02-1.42.25-.7.25-1.29.17-1.42-.07-.12-.27-.2-.57-.35z"/>'
        . '<path d="M12.05 21.5h-.01a9.4 9.4 0 0 1-4.8-1.31l-.34-.21-3.57.94.95-3.48-.22-.36a9.42 9.42 0 0 1-1.44-5.01c0-5.2 4.24-9.43 9.46-9.43 2.53 0 4.9.99 6.68 2.77a9.36 9.36 0 0 1 2.77 6.67c0 5.2-4.24 9.43-9.45 9.43zM20.5 3.49A11.8 11.8 0 0 0 12.05 0C5.46 0 .1 5.35.1 11.92c0 2.1.55 4.15 1.6 5.95L0 24l6.3-1.65a11.96 11.96 0 0 0 5.74 1.46h.01c6.58 0 11.94-5.35 11.95-11.92a11.85 11.85 0 0 0-3.5-8.4z"/>'
        . '</svg>';
    $channelDefs = ['email' => '✉️', 'sms' => '📱', 'whatsapp' => $waLogo];

    $vars = array_keys(($templateVariables ?? []));

    $waPlaceholders = old('whatsapp_placeholders', $notification->whatsapp_placeholders ?: []);
    if (! is_array($waPlaceholders) || count($waPlaceholders) === 0) {
        $waPlaceholders = ['', '', ''];
    }

    $action = $isEdit
        ? route('admin.notification-center.update', $notification)
        : route('admin.notification-center.store');
@endphp

@push('styles')
<style>
    .nc-form { max-width: 880px; margin: 16px auto 0; display: grid; gap: 18px; }
    .card { background: #fff; border: 1px solid #eef2f7; border-radius: 16px; box-shadow: 0 1px 2px rgba(15,23,42,.03), 0 4px 12px -8px rgba(15,23,42,.06); overflow: hidden; }
    .card-head { padding: 16px 22px; border-bottom: 1px solid #f1f5f9; }
    .card-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: #0f172a; }
    .card-body { padding: 22px; display: flex; flex-direction: column; gap: 18px; }
    .field-row { display: grid; gap: 7px; }
    .field-row > label { font-size: 12.5px; font-weight: 700; color: #334155; }
    .field-row input[type="text"], .field-row textarea {
        width: 100%; padding: 10px 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
        font-size: 14px; font-family: inherit; color: #0f172a; transition: border-color .15s, box-shadow .15s;
    }
    .field-row input[type="text"]:focus, .field-row textarea:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.16); }
    .field-row textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
    .field-row .help { font-size: 11.5px; color: #94a3b8; line-height: 1.55; }
    .field-err { font-size: 11.5px; font-weight: 600; color: #b91c1c; }
    .help { font-size: 12px; color: #64748b; line-height: 1.55; margin: 0; }
    .section-divider { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 2px; padding-top: 16px; border-top: 1px solid #f1f5f9; }
    .section-divider h4 { margin: 0; font-size: 14px; font-weight: 700; color: #0f172a; }
    .section-divider__meta { padding: 3px 10px; background: #f1f5f9; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #64748b; }
    .section-divider__meta--on { background: #d1fae5; color: #065f46; }

    /* Group picker */
    .grp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
    .grp { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer; transition: all .12s; background: #fff; }
    .grp:hover { border-color: #c7d2fe; background: #fafbff; }
    .grp:has(input:checked) { border-color: #6366f1; background: #eef2ff; }
    .grp input { width: 16px; height: 16px; accent-color: #4f46e5; }
    .grp__dot { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; }
    .grp__name { font-weight: 600; font-size: 13px; color: #0f172a; flex: 1; }
    .grp__count { font-size: 11.5px; color: #64748b; }

    /* Channel accordion (from Actions/Automations) */
    .ch-list { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; }
    .ch-row { border-bottom: 1px solid #f1f5f9; }
    .ch-row:last-child { border-bottom: 0; }
    .ch-row__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; user-select: none; transition: background-color .12s; }
    .ch-row__head:hover { background: #fafbfd; }
    .ch-row[data-enabled="true"] .ch-row__head { background: linear-gradient(180deg, #f4f7ff 0%, #fff 100%); }
    .ch-row__check { position: relative; width: 22px; height: 22px; flex-shrink: 0; }
    .ch-row__check input { position: absolute; inset: 0; margin: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; z-index: 2; }
    .ch-row__check-box { width: 22px; height: 22px; border: 2px solid #cbd5e1; border-radius: 6px; background: #fff; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; }
    .ch-row__check input:checked + .ch-row__check-box { background: #4f46e5; border-color: #4f46e5; }
    .ch-row__check input:checked + .ch-row__check-box::after { content: "✓"; color: #fff; font-size: 13px; font-weight: 700; }
    .ch-row__icon { width: 36px; height: 36px; border-radius: 10px; font-size: 16px; background: #f1f5f9; border: 1px solid #e2e8f0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .ch-row[data-enabled="true"] .ch-row__icon { background: #eef2ff; border-color: #c7d2fe; }
    .ch-row__main { flex: 1; min-width: 0; }
    .ch-row__name { font-size: 14px; font-weight: 700; color: #0f172a; }
    .ch-row__hint { font-size: 11.5px; color: #64748b; margin-top: 2px; }
    .ch-row__chevron { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: #94a3b8; transition: transform .2s; }
    .ch-row[data-expanded="true"] .ch-row__chevron { transform: rotate(180deg); }
    .ch-row__body-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
    .ch-row[data-expanded="true"] .ch-row__body-wrap { grid-template-rows: 1fr; }
    .ch-row__body-inner { overflow: hidden; }
    .ch-row__body { padding: 4px 16px 18px; display: grid; gap: 14px; border-top: 1px dashed #e2e8f0; }

    .tpl-vars-block { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; display: grid; gap: 10px; }
    .tpl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .tpl-chip { display: inline-flex; align-items: center; padding: 5px 10px; background: #fff; border: 1px solid #cbd5e1; border-radius: 999px; font-family: ui-monospace, monospace; font-size: 12px; color: #334155; cursor: pointer; transition: all .15s; }
    .tpl-chip:hover { border-color: #6366f1; color: #4338ca; background: #eef2ff; }

    .wa-placeholders { display: grid; gap: 8px; }
    .wa-placeholder-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; align-items: center; }
    .wa-placeholder-row__chip { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 8px; border-radius: 6px; background: #ecfdf5; color: #047857; font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700; }
    .wa-placeholder-row__rm { width: 28px; height: 28px; border: 1px solid #fecaca; background: #fff; color: #b91c1c; border-radius: 6px; font-size: 14px; cursor: pointer; }
    .wa-add-row { padding: 8px 12px; border: 1px dashed #cbd5e1; border-radius: 8px; background: #fff; color: #475569; font-size: 12.5px; font-weight: 600; cursor: pointer; justify-self: start; }
    .wa-template-picker { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; row-gap: 6px; }
    .wa-template-picker select, .wa-template-picker input[type="text"] { width: 100%; min-height: 42px; padding: 10px 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; font-size: 14px; font-family: inherit; color: #0f172a; }
    .wa-template-picker__actions { display: flex; gap: 6px; }
    .wa-template-picker__refresh, .wa-template-picker__mode { padding: 0 12px; height: 42px; font-size: 12.5px; font-weight: 600; border: 1px solid #cbd5e1; background: #fff; color: #475569; border-radius: 10px; cursor: pointer; }

    .ch-preview { margin-top: 6px; padding-top: 14px; border-top: 1px dashed #e2e8f0; display: flex; flex-direction: column; gap: 10px; }
    .ch-preview__btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; align-self: start; }
    .ch-preview__btn:hover:not(:disabled) { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
    .ch-preview__panel { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
    .ch-preview__label { font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; }
    .ch-preview__subject { font-size: 13.5px; color: #0f172a; font-weight: 600; }
    .ch-preview__body { margin: 0; white-space: pre-wrap; word-wrap: break-word; font: inherit; font-size: 13px; line-height: 1.6; color: #1e293b; unicode-bidi: plaintext; text-align: start; }
    .ch-preview__body--html { white-space: normal; }
    .ch-preview__error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; border-radius: 8px; padding: 8px 12px; font-size: 12.5px; }

    .actions-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 22px; background: #fafbfc; border-top: 1px solid #f1f5f9; }
    .btn-primary { background: #4f46e5; color: #fff; border: 0; border-radius: 10px; padding: 11px 26px; font-weight: 700; cursor: pointer; font-size: 14px; }
    .btn-primary:hover { background: #4338ca; }
    .btn-ghost { background: transparent; color: #334155; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 20px; font-weight: 600; cursor: pointer; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; }
    .btn-ghost:hover { background: #f1f5f9; }
    /* Delivery mode (Phase 2) */
    .dm-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 10px; }
    .dm-opt { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 12px; cursor: pointer; transition: all .12s; background: #fff; }
    .dm-opt:hover { border-color: #c7d2fe; }
    .dm-opt--on { border-color: #6366f1; background: #eef2ff; }
    .dm-opt input { margin-top: 3px; accent-color: #4f46e5; }
    .dm-opt__body { display: grid; gap: 2px; }
    .dm-opt__title { font-weight: 700; font-size: 13.5px; color: #0f172a; }
    .dm-opt__hint { font-size: 11.5px; color: #64748b; }
    .dm-schedule { margin-top: 14px; padding: 14px; border: 1px dashed #c7d2fe; border-radius: 12px; background: #fafbff; display: grid; gap: 10px; }
    .dm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 12px; }
    .dm-select { width: 100%; padding: 10px 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; font-size: 14px; font-family: inherit; color: #0f172a; }
</style>
@endpush

@section('content')
    <x-admin.page-header
        :title="$isEdit ? __('admin.notification_center.edit_title') : __('admin.notification_center.new')"
        :subtitle="__('admin.notification_center.compose_subtitle')">
        <x-slot:actions>
            <a href="{{ route('admin.notification-center.index') }}" class="btn-ghost">{{ __('admin.notification_center.back') }}</a>
        </x-slot:actions>
    </x-admin.page-header>

    @include('admin.partials.flash')

    <form method="POST" action="{{ $action }}" class="nc-form"
          x-data="notificationComposer({
              channels: @js(array_values(old('channels', $notification->channels ?: []))),
              whatsappTemplateId: @js((string) old('whatsapp_template_id', $notification->whatsapp_template_id ?? '')),
              whatsappPlaceholders: @js(array_values($waPlaceholders)),
              waTemplatesEndpoint: @js(route('admin.labels.sendpulse.whatsapp.templates')),
              previewEndpoint: @js(route('admin.notification-center.preview')),
              previewCsrf: @js(csrf_token()),
              previewErrorFallback: @js(__('admin.notification_center.preview.error'))
          })">
        @csrf
        @if ($isEdit) @method('PATCH') @endif

        {{-- ── Basics ── --}}
        <div class="card">
            <div class="card-head"><h3>{{ __('admin.notification_center.compose') }}</h3></div>
            <div class="card-body">
                <div class="field-row">
                    <label for="title">{{ __('admin.notification_center.fields.title') }}</label>
                    <input id="title" type="text" name="title" value="{{ old('title', $notification->title) }}" dir="auto" required>
                    <span class="help">{{ __('admin.notification_center.fields.title_hint') }}</span>
                    @error('title') <span class="field-err">{{ $message }}</span> @enderror
                </div>

                {{-- ── Delivery mode (Phase 2: Send Now | Schedule) ── --}}
                <div class="section-divider"><h4>{{ __('admin.notification_center.delivery_mode') }}</h4></div>
                <div class="dm-opts">
                    <label class="dm-opt" :class="deliveryMode === 'now' ? 'dm-opt--on' : ''">
                        <input type="radio" name="delivery_mode" value="now" x-model="deliveryMode">
                        <span class="dm-opt__body">
                            <span class="dm-opt__title">{{ __('admin.notification_center.send_now') }}</span>
                            <span class="dm-opt__hint">{{ __('admin.notification_center.send_now_hint') }}</span>
                        </span>
                    </label>
                    <label class="dm-opt" :class="deliveryMode === 'scheduled' ? 'dm-opt--on' : ''">
                        <input type="radio" name="delivery_mode" value="scheduled" x-model="deliveryMode">
                        <span class="dm-opt__body">
                            <span class="dm-opt__title">{{ __('admin.notification_center.schedule') }}</span>
                            <span class="dm-opt__hint">{{ __('admin.notification_center.schedule_hint') }}</span>
                        </span>
                    </label>
                </div>
                <div class="dm-schedule" x-show="deliveryMode === 'scheduled'" x-cloak>
                    <div class="dm-grid">
                        <div class="field-row">
                            <label for="scheduled_date">{{ __('admin.notification_center.scheduled_date') }}</label>
                            <input id="scheduled_date" type="date" name="scheduled_date" x-model="scheduledDate">
                            @error('scheduled_date') <span class="field-err">{{ $message }}</span> @enderror
                        </div>
                        <div class="field-row">
                            <label for="scheduled_time">{{ __('admin.notification_center.scheduled_time') }}</label>
                            <input id="scheduled_time" type="time" name="scheduled_time" x-model="scheduledTime">
                            @error('scheduled_time') <span class="field-err">{{ $message }}</span> @enderror
                        </div>
                        <div class="field-row">
                            <label for="timezone">{{ __('admin.notification_center.timezone') }}</label>
                            <select id="timezone" name="timezone" x-model="timezone" class="dm-select">
                                @foreach ($timezones as $tz)
                                    <option value="{{ $tz }}">{{ $tz }}</option>
                                @endforeach
                            </select>
                            @error('timezone') <span class="field-err">{{ $message }}</span> @enderror
                        </div>
                    </div>
                    @error('delivery_mode') <span class="field-err">{{ $message }}</span> @enderror
                    <p class="help">{{ __('admin.notification_center.schedule_note') }}</p>
                </div>

                {{-- ── Audience (investor groups) ── --}}
                <div class="section-divider">
                    <h4>{{ __('admin.notification_center.audience') }}</h4>
                    <span class="section-divider__meta" x-text="groupIds.length + ' {{ __('admin.notification_center.groups_short') }}'"></span>
                </div>
                <p class="help">{{ __('admin.notification_center.audience_hint') }}</p>
                <div class="grp-grid">
                    @forelse ($groups as $group)
                        <label class="grp">
                            <input type="checkbox" name="group_ids[]" value="{{ $group->id }}"
                                   x-model.number="groupIds"
                                   @checked(in_array($group->id, $selectedGroupIds))>
                            <span class="grp__dot" style="background: {{ $group->resolveColor() }};"></span>
                            <span class="grp__name">{{ $group->name }}</span>
                            <span class="grp__count">{{ $group->investors_count }}</span>
                        </label>
                    @empty
                        <span class="help">{{ __('admin.notification_center.no_groups') }}</span>
                    @endforelse
                </div>
                @error('group_ids') <span class="field-err">{{ $message }}</span> @enderror

                {{-- ── Channels ── --}}
                <div class="section-divider">
                    <h4>{{ __('admin.notification_center.notification_channels') }}</h4>
                    <span class="section-divider__meta" :class="channels.length > 0 ? 'section-divider__meta--on' : ''"
                          x-text="channels.length + '/{{ count($channelDefs) }}'"></span>
                </div>
                <p class="help">{{ __('admin.notification_center.channels_hint') }}</p>

                <div class="ch-list">
                    @foreach ($channelDefs as $channel => $icon)
                        <div class="ch-row"
                             :data-enabled="has('{{ $channel }}') ? 'true' : 'false'"
                             :data-expanded="expandedChannel === '{{ $channel }}' ? 'true' : 'false'">
                            <div class="ch-row__head" role="button" tabindex="0"
                                 @click="toggleExpansion('{{ $channel }}')"
                                 @keydown.enter.prevent="toggleExpansion('{{ $channel }}')">
                                <label class="ch-row__check" @click.stop>
                                    <input type="checkbox" name="channels[]" value="{{ $channel }}"
                                           :checked="has('{{ $channel }}')"
                                           @change="toggle('{{ $channel }}', $event.target.checked)">
                                    <span class="ch-row__check-box" aria-hidden="true"></span>
                                </label>
                                <span class="ch-row__icon" aria-hidden="true">{!! $icon !!}</span>
                                <div class="ch-row__main">
                                    <div class="ch-row__name">{{ __('admin.notification_center.channels.' . $channel) }}</div>
                                    <div class="ch-row__hint">{{ __('admin.notification_center.channels.' . $channel . '_hint') }}</div>
                                </div>
                                <span class="ch-row__chevron" aria-hidden="true">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
                                </span>
                            </div>
                            <div class="ch-row__body-wrap">
                                <div class="ch-row__body-inner">
                                    <div class="ch-row__body">
                                        @if ($channel === 'email')
                                            <div class="field-row">
                                                <label for="email_subject">{{ __('admin.notification_center.email_subject') }}</label>
                                                <input id="email_subject" type="text" name="email_subject"
                                                       value="{{ old('email_subject', $notification->email_subject) }}" dir="auto" @focus="track($event.target)">
                                                @error('email_subject') <span class="field-err">{{ $message }}</span> @enderror
                                            </div>
                                            <div class="field-row">
                                                <label for="email_body">{{ __('admin.notification_center.email_body') }}</label>
                                                <textarea id="email_body" name="email_body" data-html-editor dir="auto" @focus="track($event.target)">{{ old('email_body', $notification->email_body) }}</textarea>
                                            </div>
                                        @elseif ($channel === 'sms')
                                            <div class="field-row">
                                                <label for="sms_body">{{ __('admin.notification_center.sms_body') }}</label>
                                                <textarea id="sms_body" name="sms_body" dir="auto" @focus="track($event.target)">{{ old('sms_body', $notification->sms_body) }}</textarea>
                                                <span class="help">{{ __('admin.notification_center.sms_body_hint') }}</span>
                                            </div>
                                        @elseif ($channel === 'whatsapp')
                                            <input type="hidden" name="whatsapp_template_id" :value="whatsappTemplateId">
                                            <div class="field-row">
                                                <label for="whatsapp_template_ui">{{ __('admin.labels.whatsapp_template') }}</label>
                                                <div class="wa-template-picker">
                                                    <select id="whatsapp_template_ui" x-show="!waTemplates.fallback" x-model="whatsappTemplateId">
                                                        <option value="">{{ __('admin.labels.whatsapp_template_picker_placeholder') }}</option>
                                                        @if (! empty($notification->whatsapp_template_id))
                                                            <option value="{{ $notification->whatsapp_template_id }}" selected>{{ $notification->whatsapp_template_id }}</option>
                                                        @endif
                                                        <template x-for="tpl in waTemplates.list" :key="tpl.name">
                                                            <option :value="tpl.name" :selected="tpl.name === whatsappTemplateId" x-text="tpl.name + (tpl.language ? '  ·  ' + tpl.language : '')"></option>
                                                        </template>
                                                    </select>
                                                    <input type="text" x-show="waTemplates.fallback" x-model="whatsappTemplateId"
                                                           :placeholder="'{{ __('admin.labels.whatsapp_template_placeholder') }}'">
                                                    <div class="wa-template-picker__actions">
                                                        <button type="button" class="wa-template-picker__refresh" @click="reloadWhatsappTemplates(true)" :disabled="waTemplates.loading">↻</button>
                                                        <button type="button" class="wa-template-picker__mode" @click="waTemplates.fallback = !waTemplates.fallback"
                                                                x-text="waTemplates.fallback ? '{{ __('admin.labels.whatsapp_templates_use_picker') }}' : '{{ __('admin.labels.whatsapp_templates_use_manual') }}'"></button>
                                                    </div>
                                                </div>
                                                <span class="help">{{ __('admin.notification_center.whatsapp_hint') }}</span>
                                                @error('whatsapp_template_id') <span class="field-err">{{ $message }}</span> @enderror
                                            </div>
                                            <div class="field-row">
                                                <label>{{ __('admin.labels.whatsapp_placeholders') }}</label>
                                                <span class="help" style="margin-bottom:6px;">{{ __('admin.labels.whatsapp_placeholders_hint') }}</span>
                                                <div class="wa-placeholders">
                                                    <template x-for="(_, idx) in whatsappPlaceholders" :key="'wa-ph-'+idx">
                                                        <div class="wa-placeholder-row">
                                                            <span class="wa-placeholder-row__chip" x-text="'{' + '{' + (idx + 1) + '}' + '}'"></span>
                                                            <input type="text" name="whatsapp_placeholders[]"
                                                                   :value="whatsappPlaceholders[idx]"
                                                                   @input="whatsappPlaceholders[idx] = $event.target.value"
                                                                   @focus="track($event.target)"
                                                                   :placeholder="'{{ __('admin.labels.whatsapp_placeholder_value') }}'">
                                                            <button type="button" class="wa-placeholder-row__rm" @click="removeWhatsappPlaceholder(idx)">×</button>
                                                        </div>
                                                    </template>
                                                </div>
                                                <button type="button" class="wa-add-row" @click="addWhatsappPlaceholder()">+ {{ __('admin.labels.whatsapp_add_placeholder') }}</button>
                                            </div>
                                        @endif

                                        {{-- Server-side dispatch-equivalent preview (shared service). --}}
                                        <div class="ch-preview" x-show="has('{{ $channel }}')" x-cloak>
                                            <button type="button" class="ch-preview__btn" @click="previewChannel('{{ $channel }}')"
                                                    :disabled="((preview['{{ $channel }}']||{}).loading) === true">
                                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                                                <span x-text="(preview['{{ $channel }}']||{}).loading ? @js(__('admin.notification_center.preview.loading')) : @js(__('admin.notification_center.preview.button'))"></span>
                                            </button>
                                            <div class="ch-preview__panel" x-show="(preview['{{ $channel }}']||{}).body !== undefined || (preview['{{ $channel }}']||{}).error" x-cloak>
                                                <template x-if="(preview['{{ $channel }}']||{}).error">
                                                    <div class="ch-preview__error" x-text="(preview['{{ $channel }}']||{}).error"></div>
                                                </template>
                                                <template x-if="(preview['{{ $channel }}']||{}).subject">
                                                    <div class="ch-preview__subject">
                                                        <span class="ch-preview__label">{{ __('admin.notification_center.preview.subject') }}</span>
                                                        <span dir="auto" x-text="(preview['{{ $channel }}']||{}).subject"></span>
                                                    </div>
                                                </template>
                                                <template x-if="(preview['{{ $channel }}']||{}).body">
                                                    <div>
                                                        <span class="ch-preview__label">{{ __('admin.notification_center.preview.body') }}</span>
                                                        @if ($channel === 'email')
                                                            <div class="ch-preview__body ch-preview__body--html" dir="auto" x-html="(preview['{{ $channel }}']||{}).body"></div>
                                                        @else
                                                            <pre class="ch-preview__body" dir="auto" x-text="(preview['{{ $channel }}']||{}).body"></pre>
                                                        @endif
                                                    </div>
                                                </template>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                @error('channels') <span class="field-err">{{ $message }}</span> @enderror

                {{-- ── Placeholders ── --}}
                <div class="section-divider"><h4>{{ __('admin.notification_center.template_variables') }}</h4></div>
                <div class="tpl-vars-block">
                    <p class="help">{{ __('admin.notification_center.template_variables_hint') }}</p>
                    <div class="tpl-chips">
                        @forelse ($vars as $key)
                            <button type="button" class="tpl-chip" @click="insertVar('{{ $key }}')">{{ '{' . '{ ' . $key . ' }' . '}' }}</button>
                        @empty
                            <span class="help">{{ __('admin.notification_center.no_variables') }}</span>
                        @endforelse
                    </div>
                </div>
            </div>

            <div class="actions-bar">
                <a href="{{ route('admin.notification-center.index') }}" class="btn-ghost">{{ __('admin.actions.cancel') }}</a>
                <button type="submit" class="btn-primary"
                        x-text="deliveryMode === 'scheduled' ? @js(__('admin.notification_center.schedule_action')) : @js(__('admin.notification_center.save_draft'))">{{ __('admin.notification_center.save_draft') }}</button>
            </div>
        </div>
    </form>
@endsection

@push('scripts')
<script src="{{ asset('assets/admin/js/html-editor.js') }}"></script>
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('notificationComposer', (cfg) => ({
        channels: Array.isArray(cfg.channels) ? [...cfg.channels] : [],
        groupIds: @js(array_map('intval', $selectedGroupIds)),
        deliveryMode:  @js(old('delivery_mode', $schedule['mode'])),
        scheduledDate: @js(old('scheduled_date', $schedule['date'])),
        scheduledTime: @js(old('scheduled_time', $schedule['time'])),
        timezone:      @js(old('timezone', $schedule['timezone'])),
        expandedChannel: null,
        focusedEl: null,

        whatsappTemplateId: cfg.whatsappTemplateId || '',
        whatsappPlaceholders: Array.isArray(cfg.whatsappPlaceholders) && cfg.whatsappPlaceholders.length > 0 ? [...cfg.whatsappPlaceholders] : ['', '', ''],
        waTemplates: { list: [], loading: false, loaded: false, error: '', fallback: false },
        waTemplatesEndpoint: cfg.waTemplatesEndpoint || null,

        preview: {},
        previewEndpoint: cfg.previewEndpoint || '',
        previewCsrf: cfg.previewCsrf || '',
        previewErrorFallback: cfg.previewErrorFallback || 'Preview failed',

        init() {
            this.expandedChannel = this.channels[0] || null;
            if (this.has('whatsapp')) this.reloadWhatsappTemplates(false);
        },

        has(channel) { return this.channels.includes(channel); },

        toggle(channel, on) {
            const i = this.channels.indexOf(channel);
            if (on && i === -1) this.channels.push(channel);
            if (!on && i !== -1) this.channels.splice(i, 1);
            const box = document.querySelector(`input[name="channels[]"][value="${channel}"]`);
            if (box) box.checked = on;
            if (on) this.expandedChannel = channel;
            if (on && channel === 'whatsapp' && !this.waTemplates.loaded) this.reloadWhatsappTemplates(false);
        },

        toggleExpansion(channel) {
            this.expandedChannel = this.expandedChannel === channel ? null : channel;
            if (this.expandedChannel === null) this.focusedEl = null;
        },

        addWhatsappPlaceholder() { this.whatsappPlaceholders.push(''); },
        removeWhatsappPlaceholder(idx) {
            if (idx < 0 || idx >= this.whatsappPlaceholders.length) return;
            if (this.whatsappPlaceholders.length === 1) { this.whatsappPlaceholders[0] = ''; return; }
            this.whatsappPlaceholders.splice(idx, 1);
        },

        async reloadWhatsappTemplates(force = false) {
            if (!this.waTemplatesEndpoint) { this.waTemplates.fallback = true; return; }
            this.waTemplates.loading = true; this.waTemplates.error = '';
            try {
                const res = await fetch(this.waTemplatesEndpoint + (force ? '?refresh=1' : ''), {
                    headers: { 'Accept': 'application/json' }, credentials: 'same-origin',
                });
                const body = await res.json().catch(() => ({}));
                if (!res.ok || body.ok === false) {
                    this.waTemplates.fallback = true;
                    this.waTemplates.error = body.message || @json(__('admin.labels.whatsapp_templates_error'));
                    return;
                }
                this.waTemplates.list = Array.isArray(body.templates) ? body.templates : [];
                this.waTemplates.loaded = true;
                this.waTemplates.fallback = this.waTemplates.list.length === 0;
            } catch (e) {
                this.waTemplates.fallback = true;
                this.waTemplates.error = @json(__('admin.labels.whatsapp_templates_error'));
            } finally {
                this.waTemplates.loading = false;
            }
        },

        collectDraft(channel) {
            const d = { channel, group_ids: [...this.groupIds] };
            if (channel === 'email') {
                const s = document.querySelector('input[name="email_subject"]');
                const b = document.querySelector('textarea[name="email_body"]');
                if (s) d.email_subject = s.value;
                if (b) d.email_body = b.value;
            } else if (channel === 'sms') {
                const b = document.querySelector('textarea[name="sms_body"]');
                if (b) d.sms_body = b.value;
            } else if (channel === 'whatsapp') {
                d.whatsapp_template_id = this.whatsappTemplateId || '';
                d.whatsapp_placeholders = [...this.whatsappPlaceholders];
            }
            return d;
        },

        async previewChannel(channel) {
            this.preview[channel] = Object.assign({}, this.preview[channel] || {}, { loading: true, error: null });
            try {
                const res = await fetch(this.previewEndpoint, {
                    method: 'POST', credentials: 'same-origin',
                    headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': this.previewCsrf },
                    body: JSON.stringify(this.collectDraft(channel)),
                });
                const body = await res.json().catch(() => ({}));
                if (!res.ok || body.ok === false) {
                    this.preview[channel] = { loading: false, error: body.error || this.previewErrorFallback };
                    return;
                }
                this.preview[channel] = { loading: false, subject: body.subject || null, body: body.body || '', error: null };
            } catch (e) {
                this.preview[channel] = { loading: false, error: this.previewErrorFallback };
            }
        },

        track(el) { window.__activeHtmlEditor = null; this.focusedEl = el; },

        insertVar(key) {
            const token = '{' + '{ ' + key + ' }' + '}';
            if (window.__activeHtmlEditor) { window.__activeHtmlEditor.insertToken(token); return; }
            let el = this.focusedEl;
            if (!el || !document.body.contains(el)) el = document.getElementById('sms_body');
            if (!el) return;
            const start = el.selectionStart ?? el.value.length;
            const end = el.selectionEnd ?? el.value.length;
            el.value = el.value.slice(0, start) + token + el.value.slice(end);
            el.dispatchEvent(new Event('input', { bubbles: true }));
            el.focus();
            const caret = start + token.length;
            try { el.setSelectionRange(caret, caret); } catch (_) {}
        },
    }));
});
</script>
@endpush