{{-- Tab 3: Email Content --}}

@php
    $dripId = isset($autoresponder) ? $autoresponder->id : null;
    $aiBase = isCommercialLicense("Commercial") && getApplicationSettings('mumara_ai_enabled') == 'on';
    $aiEnabled = $aiBase && routeAccess('ai_assistants');
    $aiDripChatEnabled = $aiBase && routeAccess('ai_drip_chat');
@endphp

{{-- Card: Email Subject & Pre-header --}}
<div class="mc-card">
    <div class="mc-card__head">
        <h4 class="mc-card__title">{{trans('drip.campaign.form.label.email_subject')}} & @lang('broadcasts.form.label.enable_preheader')</h4>
    </div>
    <div class="mc-card__body">
        {{-- Subject line --}}
        <div class="form-group mb-3">
            <label class="mc-label">{{trans('drip.campaign.form.label.email_subject')}}
                <span class="required"> * </span>
                {!! popover('drip.campaign.form.label.email_subject_description','drip.campaign.form.label.email_subject') !!}
            </label>
            <div class="mc-input-wrap @if(in_array('Emojis', whmcsAddOns())) mc-emoji-wrap @endif">
                <input type="text" name="email_subject" id="email_subject" class="form-control" value="{{isset($autoresponder->email_subject) ? $autoresponder->email_subject : '' }}" required>
                <span class="mc-char-count" id="mc-subject-count">0/70</span>
                @if(in_array('Emojis', whmcsAddOns()))
                <button id="emoji-button" type="button" class="mc-emoji-btn"><svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="smile" class="svg-inline--fa fa-smile fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"></path></svg></button>
                @endif
            </div>
            @if($aiEnabled)
            <button type="button" class="mc-ai-generate-btn" id="mc-ai-generate-subject">
                <i class="la la-magic"></i> @lang('ai_settings.generate.button_label')
            </button>
            @endif
        </div>

        {{-- Pre-header --}}
        <div class="form-group mb-0">
            <div class="mc-preheader-toggle">
                <label class="mc-label mb-0">@lang('broadcasts.form.label.enable_preheader')
                    {!! popover('broadcasts.form.label.enable_preheader_help','common.description') !!}
                </label>
                <span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
                    <label class="mb-0">
                        <input type="checkbox" autocomplete="off" id="enable_preheader" name="enable_preheader"
                            @if(isset($meta_data->enable_preheader) && $meta_data->enable_preheader=="on") checked @endif>
                        <span></span>
                    </label>
                </span>
            </div>
            <div id="email_pre_header_text" style="display:none;">
                <div class="mc-input-wrap @if(in_array('Emojis', whmcsAddOns())) mc-emoji-wrap @endif">
                    <input id="email_pre_header_input" placeholder="@lang('broadcasts.form.label.enable_preheader')" class="form-control" type="text" name="email_pre_header_text" value="{{isset($meta_data->email_pre_header_text) ? $meta_data->email_pre_header_text : '' }}">
                    <span class="mc-char-count" id="mc-preheader-count">0/120</span>
                    @if(in_array('Emojis', whmcsAddOns()))
                    <button id="emoji-button-pre-header" type="button" class="mc-emoji-btn"><svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="smile" class="svg-inline--fa fa-smile fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"></path></svg></button>
                    @endif
                </div>
                @if($aiEnabled)
                <button type="button" class="mc-ai-generate-btn" id="mc-ai-generate-preheader">
                    <i class="la la-magic"></i> @lang('ai_settings.generate.button_label')
                </button>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- Card: HTML Body --}}
<div class="mc-card mc-editor-card">
    <div class="mc-card__head">
        <h4 class="mc-card__title">{{trans('drip.campaign.form.label.html_body')}}
            <span class="required"> * </span>
        </h4>
        <div class="mc-card__actions">
            @if($dripId && $aiDripChatEnabled)
                <a href="{{ route('drips.ai-builder') }}?drip={{ $dripId }}" class="mc-btn mc-btn--sm mc-btn--primary">
                    <i class="la la-magic"></i> {{ trans('broadcasts.button.ai_builder') }}
                </a>
            @endif
        </div>
    </div>

    {{-- TinyMCE Editor --}}
    <div class="mc-card__editor">
        <textarea id="content_html" name="content_html">{{@$meta_data->content_html}}</textarea>
    </div>

    {{-- Action strip below editor --}}
    <div class="mc-editor-actions">
        <button type="button" class="mc-editor-action-btn mc-editor-action-btn--primary mc-varpicker-open" data-editor="content_html">
            <i class="la la-code"></i> {{ trans('broadcasts.form.button.insert_variable') }}
        </button>
    </div>
</div>

{{-- Card: Email Optimization --}}
<div class="mc-card">
    <div class="mc-card__head">
        <h4 class="mc-card__title">{{ trans('broadcasts.settings.card.email_optimization') }}</h4>
    </div>
    <div class="mc-card__body">
        <div class="form-group mb-0">
            <div class="mc-preheader-toggle">
                <label class="mc-label mb-0">{{ trans('broadcasts.form.label.responsive_email') }}
                    <i class="fa fa-question-circle popovers" data-html="true" data-toggle="kt-popover"
                       data-container="body" data-trigger="hover" data-placement="right"
                       data-content="{{ trans('broadcasts.form.label.responsive_email_description') }}"
                       data-original-title="{{ trans('broadcasts.form.label.responsive_email') }}"></i>
                </label>
                <span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
                    <label class="mb-0">
                        <input type="checkbox" id="responsive_email" name="responsive_email"
                            @if(isset($meta_data->responsive_email) && $meta_data->responsive_email == "on") checked @endif>
                        <span></span>
                    </label>
                </span>
            </div>
        </div>
    </div>
</div>

{{-- Card: Text Body --}}
<div class="mc-card">
    <div class="mc-card__head">
        <h4 class="mc-card__title">{{trans('drip.campaign.form.label.text_body')}}
            <span class="required"> * </span>
            {!! popover('drip.campaign.form.label.text_body_description','common.description') !!}
        </h4>
        <div class="mc-card__head-actions">
            <button type="button" class="mc-ai-generate-btn" id="mc-copy-as-text">
                <i class="la la-copy"></i> @lang('ai_settings.generate.convert_html_to_text')
            </button>
            @if($aiEnabled)
            <button type="button" class="mc-ai-generate-btn" id="mc-ai-generate-text">
                <i class="la la-magic"></i> @lang('ai_settings.generate.button_label')
            </button>
            @endif
        </div>
    </div>
    <div class="mc-card__body">
        <textarea id="content_text" name="content_text" class="form-control" rows="15" required>{{@$meta_data->content_text}}</textarea>
    </div>
</div>

{{-- Card: Attachments --}}
@php
    $ae = get_allowed_extensions();
    $max_file = file_upload_max_size();
    $max_file_MB = round(($max_file / 1024) / 1024, 1);
@endphp
<div class="mc-card">
    <div class="mc-card__head">
        <h4 class="mc-card__title">{{trans('broadcasts.form.label.attach_file')}}
            {!! popover('broadcasts.form.label.attach_file_help','common.description') !!}
        </h4>
    </div>
    <div class="mc-card__body">
        <div class="form-group mb-0">
            <div data-repeater-list="files">
                <div id="drag-and-drop-zone" class="mc-dropzone dm-uploader">
                    <div data-repeater-item>
                        <div data-repeater-item="" class="mt-repeater-item">
                            <div class="mc-dropzone__inner">
                                <div class="mc-dropzone__icon">
                                    <i class="la la-cloud-upload"></i>
                                </div>
                                <div class="mc-dropzone__text">
                                    {!! trans('broadcasts.form.dropzone.text') !!}
                                </div>
                                <input type="file" title='{{ trans("broadcasts.form.dropzone.input_title") }}' />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- File info pills --}}
            <div class="mc-attach-meta">
                <div class="mc-attach-meta__item">
                    <i class="la la-weight"></i>
                    <span>{{ trans('broadcasts.form.label.max_size') }}<strong>{{ $max_file_MB }}MB</strong></span>
                </div>
                @if(!empty($ae))
                <div class="mc-attach-meta__item">
                    <i class="la la-file-o"></i>
                    <span>{{ trans('broadcasts.form.label.allowed') }}<strong>.{{ strtolower(implode(', .', $ae)) }}</strong></span>
                </div>
                @endif
            </div>

            {{-- Error message --}}
            <div id="FileSizeError" style="display:none;margin-top:8px;padding:8px 12px;background:var(--mc-danger-light, #fff5f5);color:var(--mc-danger);border-radius:var(--mc-radius, 6px);font-size:13px;"></div>

            {{-- Uploaded files list --}}
            @if (!isset($files_count) || $files_count == 0)
                <ul class="mc-file-list" id="files">
                    <li class="text-muted text-center empty" style="padding:12px 0;font-size:13px;">{{trans('common.message.no_files_uploaded')}}</li>
                </ul>
            @else
                <ul class="mc-file-list" id="files">
                    @for($i = 0; $i < $files_count; $i++)
                        <li class="mc-file-row" id='old_attachment_{{ $i }}'>
                            <div class="mc-file-row__icon"><i class="la la-file-o"></i></div>
                            <div class="mc-file-row__body">
                                <div class="mc-file-row__name">
                                    <strong class="filename">{{ $attached_files[$i]['basename'] }}</strong>
                                    <span class="status text-success">{{ trans('common.label.uploaded') }}</span>
                                </div>
                            </div>
                            <div class="mc-file-row__remove removeFile2 del-action-danger"><i class="la la-trash"></i></div>
                        </li>
                    @endfor
                </ul>
            @endif
            <ul id="imgMsg"></ul>
        </div>
    </div>
</div>