{{-- Tab 2: Settings --}}

{{-- Card: Broadcast Details --}}
<div class="mc-card">
    <div class="mc-card__head">
        <h4 class="mc-card__title">{{ trans('broadcasts.settings.card.broadcast_details') }}</h4>
    </div>
    <div class="mc-card__body">
        {{-- Template toggle (conditional) --}}
        @if($is_template)
            <input type="hidden" name="is_template" value="1">
            <div class="form-group mb-3">
                <label class="mc-label">
                    @lang('spintag.templates.add.enable_users')
                    <i class="fa fa-question-circle popovers" data-toggle="kt-popover" data-container="body" data-trigger="hover" data-placement="right" data-content="@lang('spintag.templates.add.enable_users_desc')" data-original-title="@lang('spintag.templates.add.enable_users_desc_only')"></i>
                </label>
                <span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
                    <label>
                        <input {{ (!isset($campaign) || (isset($campaign->enabled_for_users) && $campaign->enabled_for_users==1)) ? 'checked' : '' }} id="enabled_for_users" type="checkbox" autocomplete="off" name="enabled_for_users">
                        <span></span>
                    </label>
                </span>
            </div>
        @endif

        {{-- Campaign name --}}
        <div class="form-group mb-3">
            <label class="mc-label">{{ trans('broadcasts.form.label.broadcast_name') }}
                <span class="required"> * </span>
                {!! popover('broadcasts.form_heading_help','common.description') !!}
            </label>
            <input type="text" name="name" id="campaign_name" class="form-control" value="{{isset($campaign->name) ? $campaign->name : '' }}" required />
        </div>

        {{-- Group --}}
        <div class="form-group mb-3">
            <label class="mc-label">{{trans('common.label.group')}}
                <span class="required"> * </span>
                @if(!$is_template)
                <span data-toggle="tooltip" title="{{trans('broadcasts.form.label.group_tooltip_title_add_new_group')}}">
                    <a href="#modal-group-label" data-toggle="modal"><i class="fa fa-plus-square fa-fw"></i></a>
                </span>
                {!! popover('common.label.group_help','common.description') !!}
                @endif
            </label>
            <select class="form-control m-select2" name="group_id" id="group-id" data-placeholder="{{trans('broadcasts.form.label.placeholder_choose_group')}}">
                <option value="">{{trans('broadcasts.form.label.placeholder_choose_group')}}</option>
                @foreach($groups as $group)
                    <option value="{{ $group->id }}" {{ (isset($campaign->group_id) && $campaign->group_id == $group->id) ? 'selected' : '' }}>{{ $group->name }}</option>
                @endforeach
            </select>
        </div>

        {{-- Description --}}
        <div class="form-group mb-0">
            <label class="mc-label">{{trans('dynamic_tags.form.label.description')}}</label>
            <input value="{{ isset($campaign) ? $campaign->description:''}}" type="text" id="description" name="description" class="form-control"/>
        </div>
    </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"
                            {{ (isset($campaign->responsive_email) && $campaign->responsive_email == 'on') ? 'checked' : '' }}>
                        <span></span>
                    </label>
                </span>
            </div>
            <small class="mc-help mt-1" style="display:block;">
                {{ trans('broadcasts.form.help.responsive_email') }}
            </small>
        </div>
    </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 id="kt_repeater_3">
            <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 ($page_data['action'] == 'add')
                    <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>
</div>

{{-- Card: Additional Headers (collapsible, default collapsed) --}}
<div class="mc-card mc-card--collapsible {{ !empty($additional_headers) && is_array($additional_headers) ? 'mc-card--open' : '' }}">
    <div class="mc-card__head">
        <h4 class="mc-card__title">{{ trans('broadcasts.additional_header.title') }}
            {!! popover('sending_node.form.label.additional_headers_description','common.description') !!}
        </h4>
        <span class="mc-card__chevron"><i class="la {{ !empty($additional_headers) && is_array($additional_headers) ? 'la-angle-up' : 'la-angle-down' }}"></i></span>
    </div>
    <div class="mc-card__body">
        <p class="mb-3">{{ trans('broadcasts.additional_header.description') }}<br>
            <small>{!! trans('broadcasts.additional_header.note') !!}</small>
        </p>

        @php $edit = !empty($additional_headers) && is_array($additional_headers); @endphp
        <div id="kt_repeater_4">
            <div class="form-group row mb0">
                <div class="col-md-6 p-0" data-repeater-list="subscriber_filter">
                    @if($edit)
                        <div class="mt-repeater">
                            <div data-repeater-item>
                                @foreach($additional_headers as $key => $value)
                                    <div data-repeater-item class="mt-repeater-item">
                                        <div class="mc-header-row">
                                            <input type="text" name="header" placeholder="{{ trans('common.label.header') }}" class="form-control" value="{{ isset($value->header) ? $value->header : '' }}">
                                            <span class="mc-header-sep">:</span>
                                            <input type="text" name="header_value" placeholder="{{ trans('common.label.value') }}" class="form-control" value="{{ isset($value->header_value) ? $value->header_value : '' }}">
                                            <a href="javascript:;" data-repeater-delete="" class="mc-btn mc-btn--sm mc-btn--danger del-action-danger"><i class="la la-trash"></i></a>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @else
                        <div class="mt-repeater" style="display: none;">
                            <div data-repeater-item="" class="mt-repeater-item">
                                <div class="mc-header-row">
                                    <input type="text" name="header" placeholder="{{ trans('common.label.header') }}" class="form-control" value="">
                                    <span class="mc-header-sep">:</span>
                                    <input type="text" name="header_value" placeholder="{{ trans('common.label.value') }}" class="form-control" value="">
                                    <a href="javascript:;" data-repeater-delete="" class="mc-btn mc-btn--sm mc-btn--danger del-action-danger"><i class="la la-trash"></i></a>
                                </div>
                            </div>
                        </div>
                    @endif
                    <a href="javascript:;" style="display: {{$edit?'none':''}}" class="mc-btn mc-btn--sm new-btn">
                        <i class="la la-plus"></i> {{ trans('common.form.button.add_new') }}
                    </a>
                </div>
            </div>
            <div class="row" id="btn-new" style="display: {{$edit?'block':'none'}}">
                <div class="col">
                    <div data-repeater-create="" class="mc-btn mc-btn--sm">
                        <i class="la la-plus"></i>
                        <span>{{ trans('broadcasts.additional_header.button.add') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>