{{-- Tab 1: Content --}}

{{-- Card: Email Subject & Pre-header --}}
<div class="mc-card">
    <div class="mc-card__head">
        <h4 class="mc-card__title">{{trans('broadcasts.form.label.email_subject')}} & {{trans('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('broadcasts.form.label.email_subject')}}
                <span class="required"> * </span>
                {!! popover('broadcasts.form.label.email_subject_help','common.description') !!}
            </label>
            <div class="mc-input-wrap @if(in_array('Emojis', whmcsAddOns())) mc-emoji-wrap @endif">
                <input type="text" name="subject" id="subjectt" class="form-control" value="{{isset($campaign->subject) ? $campaign->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(isset($campaign) && $campaign->id && isCommercialLicense("Commercial") && getApplicationSettings('mumara_ai_enabled') == 'on' && routeAccess('ai_assistants'))
            <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($campaign->enable_preheader) && $campaign->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($campaign->email_pre_header_text) ? $campaign->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(isset($campaign) && $campaign->id && isCommercialLicense("Commercial") && getApplicationSettings('mumara_ai_enabled') == 'on' && routeAccess('ai_assistants'))
                <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('broadcasts.form.label.html_body')}}
            <span class="required"> * </span>
        </h4>
        <div class="mc-card__actions">
            @if(!isset($campaign) || $campaign->is_campaign_builder != 2)
                <a href="javascript:;" id="mc-import-toggle" class="mc-btn mc-btn--sm mc-btn--ghost">
                    <i class="la la-download"></i> {{trans('broadcasts.form.link.fetch_url')}}
                </a>
            @endif
            @if(!isset($campaign) || $campaign->is_campaign_builder != 2)
                @if(isset($campaign) && $campaign->id && isCommercialLicense("Commercial") && getApplicationSettings('mumara_ai_enabled') == 'on' && routeAccess('ai_assistants'))
                    <button type="button" class="mc-btn mc-btn--sm mc-btn--ghost" id="mc-ai-inspect-btn">
                        <i class="la la-stethoscope"></i> {{ trans('broadcasts.button.inspect_with_ai') }}
                    </button>
                @endif
                @if(isset($campaign) && $campaign->id && isCommercialLicense("Commercial") && getApplicationSettings('mumara_ai_enabled') == 'on' && routeAccess('ai_broadcast_chat'))
                    <a href="{{ route('broadcasts.ai-builder') }}?campaign={{ $campaign->id }}" class="mc-btn mc-btn--sm mc-btn--primary">
                        <i class="la la-magic"></i> {{ trans('broadcasts.button.ai_builder') }}
                    </a>
                @endif
            @endif
        </div>
    </div>

    {{-- Import URL slide panel --}}
    <div id="mc-import-panel" class="mc-import-panel">
        <div class="mc-import-row">
            <input type="text" name="complete_url" id="complete_url" class="form-control" placeholder="{{trans('broadcasts.form.label.get_content_from_url')}}" value="{{ isset($campaign->url) ? $campaign->url : '' }}">
            <button class="mc-btn mc-btn--primary mc-btn--sm" type="button" onclick="fetchURLContents()">
                <i class="la la-download"></i> {{trans('broadcasts.form.button.get')}}
            </button>
        </div>
        @if($id_=='1')
        <div class="mc-import-option">
            <span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success kt-switch--sm">
                <label class="mb-0">
                    <input type="checkbox" autocomplete="off" id="downloadImage" name="downloadImage" />
                    <span></span>
                </label>
            </span>
            <div class="mc-import-option__text">
                <span>{{trans('broadcasts.form.label.download_image')}}</span>
                <small>{{ trans('broadcasts.form.label.download_image_help') }}</small>
            </div>
        </div>
        @endif
    </div>

    {{-- D&D Builder preview zone --}}
    @if(routeAccess('drag_and_drop_builder') && isset($campaign) && $campaign->is_campaign_builder == 2)
        <div class="mc-builder-status {{ !empty($campaign->content_html) ? 'mc-builder-status--done' : '' }}" id="getBuilder">
            @if(!empty($campaign->content_html))
                <div class="mc-builder-status__icon">
                    <i class="la la-check-circle"></i>
                </div>
                <div class="mc-builder-status__body">
                    <strong class="mc-builder-status__title">{{ trans('broadcasts.builder_status.title.ready') }}</strong>
                    <span class="mc-builder-status__hint">{{ trans('broadcasts.builder_status.hint.last_edited') }}</span>
                </div>
                <div class="mc-builder-status__actions">
                    <a href="#" class="mc-btn mc-btn--sm mc-builder-status__preview-link">
                        <i class="la la-eye"></i> {{ trans('broadcasts.builder_status.action.preview') }}
                    </a>
                    <a href="{{ route('broadcasts.builder', $campaign->id) }}" class="mc-btn mc-btn--sm mc-btn--primary">
                        <i class="la la-paint-brush"></i> {{ trans('broadcasts.builder_status.action.edit_design') }}
                    </a>
                </div>
            @else
                <div class="mc-builder-status__icon">
                    <i class="la la-paint-brush"></i>
                </div>
                <div class="mc-builder-status__body">
                    <strong class="mc-builder-status__title">{{ trans('broadcasts.builder_status.title.design') }}</strong>
                    <span class="mc-builder-status__hint">{{ trans('broadcasts.builder_status.hint.no_coding') }}</span>
                </div>
                <div class="mc-builder-status__actions">
                    <a href="{{ route('broadcasts.builder', $campaign->id) }}" class="mc-btn mc-btn--primary">
                        <i class="la la-paint-brush"></i> {{ trans('broadcasts.builder_status.action.open_builder') }}
                    </a>
                </div>
            @endif
        </div>
    @endif

    {{-- TinyMCE Editor --}}
    <div class="mc-card__editor {{ (isset($campaign) && $campaign->is_campaign_builder == 2) ? 'mc-hidden' : '' }}">
        @if($page_data['action'] == "add")
            <textarea id="content_html" name="content_html" class="content_html_new">{{ request()->get('content_html')}}</textarea>
        @else
            <textarea id="content_html" name="content_html">{!! $campaign->content_html !!}</textarea>
        @endif
    </div>

    {{-- Action strip below editor --}}
    <div class="mc-editor-actions {{ (isset($campaign) && $campaign->is_campaign_builder == 2) ? 'mc-hidden' : '' }}" id="dyntags">
        @if($id_!=3)
            <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>
        @endif
        <div id="htmltotext" style="display:none"></div>
    </div>
</div>

{{-- Card: Text Body --}}
<div class="mc-card">
    <div class="mc-card__head">
        <h4 class="mc-card__title">{{trans('broadcasts.form.label.text_body')}}
            <span class="required"> * </span>
            {!! popover('broadcasts.form.label.text_body_help','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(isset($campaign) && $campaign->id && isCommercialLicense("Commercial") && getApplicationSettings('mumara_ai_enabled') == 'on' && routeAccess('ai_assistants'))
            <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="20" required>{{isset($campaign->content_text) ? $campaign->content_text : '' }}</textarea>
    </div>
</div>

{{-- Card: Templates (conditional, collapsible) --}}
@if(!$is_template && isset($getPredefinedTemps) && $getPredefinedTemps && $id_=='1' && routeAccess('broadcast_templates_clone') && $page_data['action'] == 'edit' && isset($templates) && count($templates) > 0)
<div class="mc-card mc-card--collapsible">
    <div class="mc-card__head">
        <h4 class="mc-card__title">{{trans('spintag.add.button.pre_define_template')}}</h4>
        <span class="mc-card__chevron"><i class="la la-angle-down"></i></span>
    </div>
    <div class="mc-card__body">
        <div class="mb-3">
            <input type="text" class="form-control" name="searchp" id="searchp" placeholder="{{ trans('broadcasts.form.placeholder.search_templates') }}">
        </div>
        <div class="mc-template-list">
            @foreach($templates as $template)
                @if(isset($client) && $client && $template->enabled_for_users=='0')
                    @continue
                @endif
                <div class="mc-template-item">
                    <span class="mc-template-item__name">{{$template->name}}</span>
                    <span class="mc-template-item__desc">{{$template->description==null?'---':$template->description}}</span>
                    <button data-id="{{$campaign->id}}" id="{{$template->id}}" class="mc-btn mc-btn--sm mc-btn--primary btn-clone" type="button">{{ trans('broadcasts.form.button.use_template') }}</button>
                </div>
            @endforeach
        </div>
    </div>
</div>
@endif

{{-- Builder Quick Preview Modal --}}
@if(routeAccess('drag_and_drop_builder') && isset($campaign) && $campaign->is_campaign_builder == 2 && !empty($campaign->content_html))
<div class="mc-preview-modal" id="mc-builder-preview-modal">
    <div class="mc-preview-modal__dialog">
        <div class="mc-preview-modal__header">
            <span class="mc-preview-modal__title"><i class="la la-eye"></i> {{ trans('broadcasts.preview_modal.title') }}</span>
            <div class="mc-preview-modal__devices">
                <button type="button" class="mc-device-btn active" data-modal-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-modal-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>
            <button type="button" class="mc-preview-modal__close" id="mc-builder-preview-close">&times;</button>
        </div>
        <div class="mc-preview-modal__body">
            <div class="mc-preview-modal__frame" id="mc-builder-modal-frame">
                <iframe id="mc-builder-modal-iframe"></iframe>
            </div>
        </div>
    </div>
</div>
@endif

{{-- Inspect with AI — Slide-in Panel --}}
@if(isset($campaign) && $campaign->id && isCommercialLicense("Commercial") && getApplicationSettings('mumara_ai_enabled') == 'on' && routeAccess('ai_assistants'))
<div class="mc-inspect-overlay" id="mc-inspect-overlay"></div>
<div class="mc-inspect-panel" id="mc-inspect-panel">
    <div class="mc-inspect-header">
        <div class="mc-inspect-header-title">
            <i class="la la-stethoscope"></i> {{ trans('broadcasts.inspect.panel.title') }}
        </div>
        <button type="button" class="mc-inspect-close" id="mc-inspect-close">&times;</button>
    </div>
    <div class="mc-inspect-focus">
        <label class="mc-inspect-focus-label">{{ trans('broadcasts.inspect.label.focus_area') }}</label>
        <select id="mc-inspect-focus" class="mc-inspect-focus-select">
            <option value="all">{{ trans('broadcasts.inspect.focus.all') }}</option>
            <option value="deliverability">{{ trans('broadcasts.inspect.focus.deliverability') }}</option>
            <option value="design">{{ trans('broadcasts.inspect.focus.design') }}</option>
            <option value="content">{{ trans('broadcasts.inspect.focus.content') }}</option>
            <option value="accessibility">{{ trans('broadcasts.inspect.focus.accessibility') }}</option>
        </select>
    </div>
    <div class="mc-inspect-body" id="mc-inspect-body">
        <div class="mc-inspect-empty">
            <i class="la la-search-plus"></i>
            <p>{!! trans('broadcasts.inspect.empty.description') !!}</p>
        </div>
    </div>
    <div class="mc-inspect-footer">
        <span class="mc-inspect-disclaimer"><i class="la la-bolt"></i> {{ trans('broadcasts.inspect.footer.powered_by') }}</span>
        <button type="button" class="mc-btn mc-btn--sm" id="mc-inspect-apply-btn" style="display:none;">
            <i class="la la-check"></i> {{ trans('broadcasts.inspect.button.apply_fixes') }}
        </button>
        <button type="button" class="mc-btn mc-btn--sm mc-btn--primary" id="mc-inspect-run-btn">
            <i class="la la-play"></i> {{ trans('broadcasts.inspect.button.run_inspection') }}
        </button>
    </div>
</div>
@endif