{{-- Tab 4: 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> 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="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="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="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>Save the drip first to enable preview</span>
                    </div>
                @else
                    <iframe id="preview-iframe" frameborder="0"></iframe>
                @endif
            </div>
        </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('drip.campaign.form.label.send_preview_to_email')}}
        </h4>
        <div class="mc-card__actions">
            <span style="font-size:12px;color:var(--mc-text-muted);margin-right:4px;">Send a test email</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;">

        {{-- Domain toggle --}}
        <div class="form-group mb-3 DripPreviewDomain" style="display:none;">
            <label class="mc-label">{{trans('drip.campaign.form.label.domain_to_use_for_preview')}}
                {!! popover('drip.campaign.form.label.domain_to_use_for_preview_description','common.description') !!}
            </label>
            <div class="mc-preheader-toggle mb-2">
                <span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
                    <label class="mb-0">
                        <input id="pops2" type="checkbox" autocomplete="off" onchange="showOrHide()" name="process_bounce_report">
                        <span></span>
                    </label>
                </span>
            </div>
            <div id="otions" style="display:none">
                <select class="form-control m-select2" name="domain_id" id="domain_id" disabled>
                    @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";
                                $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'))
                            @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>

        {{-- Sending Node Selection --}}
        <div class="form-group mb-3">
            <label class="mc-label">{{trans('broadcasts.form.send_preview.label.smtp_for_preview')}}
                {!! popover('broadcasts.form.send_preview.label.smtp_for_preview_help','common.description') !!}
            </label>
            <input type="hidden" name="use_custom_smtp" id="use_custom_smtp" value="0">
            <div class="kt-radio-inline mb-2">
                <label class="kt-radio">
                    <input type="radio" name="smtp_source" value="group" id="smtp_source_group" checked>
                    Use drip group's sending nodes (Default)
                    <span></span>
                </label>
                <label class="kt-radio">
                    <input type="radio" name="smtp_source" value="custom" id="smtp_source_custom">
                    Use a specific sending node
                    <span></span>
                </label>
            </div>
            <div id="custom_smtp_wrap" style="display:none;">
                <select class="form-control m-select2" name="smtp_id" id="smtp_id">
                    @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>

        {{-- Email input --}}
        <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="text" name="preview_email" id="preview_email" class="form-control" value="" placeholder="Enter email address...">
            <small class="mc-help mt-1" style="display:block;">{{trans('drip.campaign.form.button.test_email_description')}}</small>
        </div>

        {{-- Send button --}}
        <div class="form-group mb-0">
            <button {{ $is_new_record ? 'disabled' : '' }} type="button" class="mc-btn mc-btn--primary" id="smpt-send-mail">
                <i class="la la-paper-plane"></i> {{trans('drip.campaign.form.button.test_email')}}
            </button>
            <div id="mail-sent-msg" style="display:none;margin-top:8px;"></div>
            <span id="mail-sent-log-link" style="display:none;"><a>{{trans('drip_campaigns.add_new.tab3.show_log')}}</a></span>
            <div id="mail-sent-log" style="display:none;"></div>
        </div>
    </div>
</div>