{{-- Notification Template Trigger Preview --}}
{{-- Used in SaveLeadStatusModal and SaveProjectStatusModal when a matching template is found --}}

@if($this->has_matched_notification)
<div
    x-data="{
        sendEmail: @entangle('sendEmailNotification').defer,
        sendSms: @entangle('sendSmsNotification').defer
    }"
    x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="opacity-0 transform scale-95"
    x-transition:enter-end="opacity-100 transform scale-100"
>
    <x-ui.section-card
        :title="__('Notifications')"
        icon="bell"
        icon-color="text-info"
        border-color="border-info-subtle"
        class="mb-4"
    >
        <p class="text-muted small mb-4">
            @lang('Notification templates are linked to this status. Select the template(s) you wish to send.')
        </p>

        {{-- ── Email ───────────────────────────────────────────────────────── --}}
        @if(count($matchedEmailTemplates) > 0)
            <div class="mb-3">
                <div class="row g-2 align-items-end mb-3">
                    <div class="col">
                        <x-ui.select
                            :label="__('Email template')"
                            wire:model="selectedEmailTemplateId"
                            :options="$matchedEmailTemplates"
                            :placeholder="__('— None —')"
                        />
                    </div>
                    <div class="col-auto pb-1">
                        <div class="custom-control custom-switch">
                            <input
                                type="checkbox"
                                class="custom-control-input"
                                id="send-email-toggle"
                                x-model="sendEmail"
                                wire:model.defer="sendEmailNotification"
                            >
                            <label class="custom-control-label" for="send-email-toggle">
                                <x-ui.nicon name="mail" class="text-primary me-1"/>
                                @lang('Send')
                            </label>
                        </div>
                    </div>
                </div>

                <div x-show="sendEmail" x-collapse x-cloak>
                    <div class="card border rounded-3 bg-lighter">
                        <div class="card-inner py-3">
                            <x-ui.input :label="__('Subject')" model="notificationSubject"/>
                            <livewire:widgets.trix
                                :label="__('Body')"
                                :value="nl2br($notificationBody ?? '')"
                                :key="'notification-trix-email-'.($selectedEmailTemplateId ?? 'none')"
                            />
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- Divider --}}
        @if(count($matchedEmailTemplates) > 0 && count($matchedSmsTemplates) > 0)
            <hr class="my-3">
        @endif

        {{-- ── SMS ────────────────────────────────────────────────────────── --}}
        @if(count($matchedSmsTemplates) > 0)
            <div class="mb-1">
                <div class="row g-2 align-items-end mb-3">
                    <div class="col">
                        <x-ui.select
                            :label="__('SMS template')"
                            wire:model="selectedSmsTemplateId"
                            :options="$matchedSmsTemplates"
                            :placeholder="__('— None —')"
                        />
                    </div>
                    <div class="col-auto pb-1">
                        <div class="custom-control custom-switch">
                            <input
                                type="checkbox"
                                class="custom-control-input"
                                id="send-sms-toggle"
                                x-model="sendSms"
                                wire:model.defer="sendSmsNotification"
                            >
                            <label class="custom-control-label" for="send-sms-toggle">
                                <x-ui.nicon name="mobile" class="text-success me-1"/>
                                @lang('Send')
                            </label>
                        </div>
                    </div>
                </div>

                <div x-show="sendSms" x-collapse x-cloak>
                    <div class="card border rounded-3 bg-lighter">
                        <div class="card-inner py-3">
                            <x-ui.textarea
                                :label="__('Message')"
                                model="smsNotificationBody"
                                rows="4"
                                :character-limit="500"
                                :help="__('Plain text only, no HTML formatting')"
                            />
                            <div class="d-flex justify-content-end mt-1">
                                <span class="text-muted fs-12px">
                                    {{ $this->sms_notification_count }} SMS &middot; {{ $this->sms_notification_length }} / {{ $this->sms_notification_count * 160 }} @lang('chars')
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </x-ui.section-card>
</div>
@endif