{{-- Tab 3: Preview & Test --}}

@php $is_new_record = ($page_data['action'] == 'add'); @endphp

{{-- Card: Email Preview --}}
<div class="mc-card">
    <div class="mc-card__head">
        <h4 class="mc-card__title">{{trans('broadcasts.form.email_preview.form_heading')}}</h4>
        <div class="mc-card__actions">
            <button type="button" class="mc-btn mc-btn--sm" id="refresh-preview">
                <i class="la la-refresh"></i> {{ trans('common.form.button.refresh') }}
            </button>
        </div>
    </div>
    <div class="mc-card__body" style="padding:0;">
        <div class="mc-preview-bar">
            <button type="button" class="mc-device-btn active" data-device="desktop" title="{{ trans('common.label.desktop') }}">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
            </button>
            <button type="button" class="mc-device-btn" data-device="tablet" title="{{ trans('common.label.tablet') }}">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="2" width="16" height="20" rx="2"/><line x1="12" y1="18" x2="12" y2="18"/></svg>
            </button>
            <button type="button" class="mc-device-btn" data-device="mobile" title="{{ trans('common.label.mobile') }}">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12" y2="18"/></svg>
            </button>
        </div>
        <div class="mc-preview-wrap">
            <div class="mc-preview-frame" id="preview-frame-wrapper">
                @if($is_new_record)
                    <div class="mc-preview-empty">
                        <i class="la la-eye"></i>
                        <span>{{ trans('broadcasts.preview.empty.save_first') }}</span>
                    </div>
                @else
                    <iframe id="preview-iframe" frameborder="0"></iframe>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- Card: Spam Analyzer --}}
<div class="mc-card">
    <div class="mc-card__head">
        <h4 class="mc-card__title">{{ trans('broadcasts.spam_analyzer.title') }}</h4>
    </div>
    <div class="mc-card__body">
        <p class="mb-3" style="color:var(--mc-text-secondary);font-size:13px;">
            {{ trans('broadcasts.spam_analyzer.description') }}
        </p>
        <button class="mc-btn mc-btn--primary" type="button" id="mc-analyze-spam">
            <i class="la la-check-circle"></i> {{ trans('broadcasts.spam_analyzer.button') }}
        </button>
        <div id="mc-spam-results" class="mt-3" style="display:none;"></div>
    </div>
</div>

{{-- Card: Send Test Email (toggle-collapsible) --}}
<div class="mc-card">
    <div class="mc-card__head mc-card__head--collapsible" id="mc-preview-toggle" style="cursor:pointer;">
        <h4 class="mc-card__title">
            <i class="la la-paper-plane" style="color:var(--mc-accent);"></i>
            {{trans('broadcasts.form.send_preview.form_heading')}}
        </h4>
        <div class="mc-card__actions">
            <span style="font-size:12px;color:var(--mc-text-muted);margin-right:4px;">{{ trans('broadcasts.send_test.hint') }}</span>
            <i class="la la-angle-down mc-collapse-chevron"></i>
        </div>
    </div>
    <div class="mc-card__body" id="mc-preview-body" style="display:none;">
        {{-- Uses a div instead of nested form to avoid HTML nesting issues.
             campaign.js serializes inputs via #send_preview_email find(':input') --}}
        <div id="send_preview_email" class="kt-form kt-form--label-right" autocomplete="off">
            <input type="hidden" name="campaign_id" value="{{ (isset($campaign->id)) ? $campaign->id : ''}}">

            @php
                $broadcast_sender_info = getSetting('broadcast_sender_info');
            @endphp
            @if($broadcast_sender_info != "on")
            <div class="form-group mb-3">
                <label class="mc-label">
                    {{trans('broadcasts.form.label.select_serder_info')}}
                    {!! popover('broadcasts.form.label.select_serder_info_help','common.description') !!}
                </label>
                <div class="kt-radio-inline">
                    <label class="kt-radio">
                        <input checked type="radio" autocomplete="off" name="sending_domain" value="0" id="custom_domain">
                        {{trans('broadcasts.form.label.option_select_domain')}}
                        <span></span>
                    </label>
                    <label class="kt-radio">
                        <input type="radio" autocomplete="off" name="sending_domain" value="1" id="sending_node">
                        {{trans('broadcasts.form.label.option_select_sending_node')}}
                        <span></span>
                    </label>
                </div>
            </div>
            @endif
            <input type="hidden" name="preview_sending_type" id="preview_sending_type" value="1">

            <div class="form-group mb-3" id="customDomains">
                <label class="mc-label">{{trans('broadcasts.form.send_preview.label.domain_for_preview')}}
                    <span class="required"> * </span>
                    {!! popover('broadcasts.form.send_preview.label.domain_for_preview_help','common.description') !!}
                </label>
                <select class="form-control m-select2" name="domain" id="domain">
                    @php $unauth_sending_domain = getApplicationSettings('unauth_sending_domain'); @endphp
                    @php $disableFlag = 0; @endphp
                    <optgroup label="{{trans('contact_list.form.choose_domain.option_eligible_domains')}}">
                    @foreach($domain_maskings as $domain)
                        @if($domain->domain_status == 1 || $unauth_sending_domain != 'on')
                            <option value="{{ $domain->id }}">{{ $domain->domain }}</option>
                        @else
                            @php
                                $disableTxt = "inactive";
                                if($domain->domain_status == 3) $disableTxt = "authentication failed";
                                if($domain->domain_status == 4) $disableTxt = "pending authentication";
                            @endphp
                            @php $disableFlag = 1; @endphp
                        @endif
                    @endforeach
                    </optgroup>
                    @if($disableFlag)
                    <optgroup label="{{trans('contact_list.form.choose_domain.option_ineligible_domains')}}">
                    @foreach($domain_maskings as $domain)
                        @if($domain->domain_status == 1 || $unauth_sending_domain != 'on')
                        @else
                            @php
                                $disableTxt = "inactive";
                                if($domain->domain_status == 3) $disableTxt = "authentication failed";
                                if($domain->domain_status == 4) $disableTxt = "pending authentication";
                            @endphp
                            <option disabled value="{{ $domain->id }}">{{ $domain->domain }} <small>({{$disableTxt}})</small></option>
                        @endif
                    @endforeach
                    </optgroup>
                    @endif
                </select>
            </div>

            <div class="form-group mb-3">
                <label class="mc-label">{{trans('broadcasts.form.send_preview.label.smtp_for_preview')}}
                    <span class="required"> * </span>
                    {!! popover('broadcasts.form.send_preview.label.smtp_for_preview_help','common.description') !!}
                </label>
                <select class="form-control m-select2" name="smtp" id="smpt">
                    @foreach($group_smtps as $key => $group)
                        <optgroup label="{{$key}}">
                            @foreach($group as $smtp)
                                <option value="{{ $smtp['id'] }}">{{ $smtp['name'] }}</option>
                            @endforeach
                        </optgroup>
                    @endforeach
                </select>
            </div>

            <div class="form-group mb-3">
                <label class="mc-label">{{trans('broadcasts.form.send_preview.label.send_preview_to_email')}}
                    {!! popover('broadcasts.form.send_preview.label.send_preview_to_email_help','common.description') !!}
                </label>
                <input type="email" name="preview_email" class="form-control" value="">
                <small class="mc-help">{{trans('drip.campaign.form.button.test_email_description')}}</small>
            </div>

            <div class="form-group mb-3">
                <label class="mc-label">{{trans('broadcasts.form.send_preview.label.contact_email_id')}}
                    {!! popover('broadcasts.form.send_preview.label.contact_email_id_help','common.description') !!}
                </label>
                <input type="number" name="custom_variable_email" class="form-control" />
            </div>

            <div class="form-group mb-0">
                <button type="button" id="preview-campaign" class="mc-btn mc-btn--primary" {{ $is_new_record ? "disabled" : "" }}>
                    <i class="la la-paper-plane"></i> {{trans('broadcasts.form.send_preview.button.send')}}
                </button>
                <br>
                @if(isset($campaign) && isset($campaign->id))
                    <small class="mc-help mt-2" style="display:inline-block;">{!!trans('broadcasts.form.send_preview.help_note')!!}</small>
                @else
                    <small class="mc-help mt-2" style="display:inline-block;">{!!trans('broadcasts.form.send_preview.new_help_note')!!}</small>
                @endif
                <br>
                <span id="mail-sent-msg"></span>
            </div>
        </div>
    </div>
</div>