@extends(decide_template())

@section('title', $page_data['title'])

@section('page_styles')
<link href="{{ asset('css/campaign-create-v2.css') }}?v={{$local_version}}" rel="stylesheet" type="text/css">
<link href="{{ asset('themes/default/css/sweetalert2.min.css') }}" rel="stylesheet" type="text/css">
@endsection

@section('page_scripts')
<script src="{{ asset('themes/default/js/jquery.form.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('themes/default/js/jquery.validate.js') }}" type="text/javascript"></script>
<script src="{{ asset('themes/default/js/additional-methods.js') }}" type="text/javascript"></script>
<script src="{{ asset('themes/default/js/init.js') }}" type="text/javascript"></script>
<script src="{{ asset('themes/default/js/select2.full.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('themes/default/js/select2.js') }}" type="text/javascript"></script>
<script src="{{ asset('themes/default/js/form-controls.js') }}" type="text/javascript"></script>
@include('includes.editor-scripts')
<script src="{{ asset('themes/default/js/sweetalert2.min.js') }}" type="text/javascript"></script>

{{-- ================================================================
     Variable Picker Data (JSON for the JS picker)
     ================================================================ --}}
<script>
window.mcVariables = (function() {
    var data = { system: [], fields: [], spintags: [], dynamic: [], profile: [] };

    {{-- System Variables --}}
    data.system = [
        { name: "{{ trans('common.variables.system_variables.option_sender_name') }}", insert: "%%sender_name%%", display: "%%sender_name%%" },
        { name: "{{ trans('common.variables.system_variables.option_sender_email') }}", insert: "%%sender_email%%", display: "%%sender_email%%" },
        { name: "{{ trans('common.variables.system_variables.option_recipient_email') }}", insert: "%%recipient_email%%", display: "%%recipient_email%%" },
        { name: "{{ trans('common.variables.system_variables.option_reply_to_email') }}", insert: "%%replyto_email%%", display: "%%replyto_email%%" },
        { name: "{{ trans('common.variables.system_variables.option_bounce_email_return_path') }}", insert: "%%bounce_email%%", display: "%%bounce_email%%" },
        { name: "{{ trans('common.variables.system_variables.option_todays_date') }}", insert: "%%todays_date%%", display: "%%todays_date%%" },
        { name: "{{ trans('common.variables.system_variables.option_web_version_url') }}", insert: '<a href="%%web_version%%">{{ trans("broadcasts.edit.form.editor.web_version") }}</a>', display: "%%web_version%%", method: "content" },
        { name: "{{ trans('common.variables.system_variables.option_list_name') }}", insert: "%%list_name%%", display: "%%list_name%%" },
        { name: "{{ trans('common.variables.system_variables.option_broadcast_name') }}", insert: "%%broadcast_name%%", display: "%%broadcast_name%%" },
        { name: "{{ trans('common.variables.system_variables.option_list_id') }}", insert: "%%list_id%%", display: "%%list_id%%" },
        { name: "{{ trans('common.variables.system_variables.option_message_id') }}", insert: "%%message_id%%", display: "%%message_id%%" },
        { name: "{{ trans('common.variables.system_variables.option_campaign_id') }}", insert: "%%campaign_id%%", display: "%%campaign_id%%" },
        { name: "{{ trans('common.variables.system_variables.option_sending_url_domain') }}", insert: "%%sending_domain%%", display: "%%sending_domain%%" },
        { name: "{{ trans('common.variables.system_variables.option_tracking_domain') }}", insert: "%%tracking_domain%%", display: "%%tracking_domain%%" },
        { name: "{{ trans('common.variables.system_variables.option_schedule_id') }}", insert: "%%schedule_id%%", display: "%%schedule_id%%" },
        { name: "{{ trans('common.variables.system_variables.option_confirm_link') }}", insert: '<a href="%%confirmurl%%">{{ trans("broadcasts.edit.form.editor.confirm") }}</a>', display: "{{ trans('broadcasts.varpicker.display.confirm_link') }}", method: "content" },
        { name: "{{ trans('common.variables.system_variables.option_unsubscribe_link') }}", insert: '<a href="%%unsubscribelink%%">{{ trans("broadcasts.edit.form.editor.unsubscribe") }}</a>', display: "{{ trans('broadcasts.varpicker.display.unsubscribe_link') }}", method: "content" },
        { name: "{{ trans('common.variables.system_variables.option_timestamp') }}", insert: "%%timestamp%%", display: "%%timestamp%%" },
        { name: "{{ trans('common.variables.system_variables.option_utc_timestamp') }}", insert: "%%utc_timestamp%%", display: "%%utc_timestamp%%" }
    ];

    {{-- Additional Fields + Custom Fields --}}
    @php
        $additional_fields = isset($additional_fields) ? $additional_fields : additionalFields();
        $custom_fields = isset($custom_fields) ? $custom_fields : customFields($adminOnClient ? ($autoresponder->user_id ?? null) : null);
    @endphp
    data.fields = [
        { name: "{{ trans('common.variables.addition_fields.contact_id') }}", insert: "%%contact_id%%", display: "%%contact_id%%" },
        { name: "{{ trans('common.variables.addition_fields.creation_date') }}", insert: "%%creation_date%%", display: "%%creation_date%%" }
        @foreach($additional_fields as $field)
        ,{ name: @json($field['name']), insert: "%%{{ $field['tag'] }}%%", display: "%%{{ $field['tag'] }}%%" }
        @endforeach
        @foreach($custom_fields as $field)
        ,{ name: @json($field['name']), insert: "%%{{ $field['tag'] }}%%", display: "%%{{ $field['tag'] }}%%" }
        @endforeach
    ];

    {{-- Spintags --}}
    @if(routeAccess('spintag.index'))
        @php
            $spin_tags = isset($spin_tags) ? $spin_tags : spinTags($adminOnClient ? ($autoresponder->user_id ?? null) : null);
        @endphp
        @if(isset($spin_tags) && count($spin_tags) > 0)
            @php
                $spintag_js = [];
                foreach($spin_tags as $st) {
                    $wrap = '{' . '{' . $st['tag'] . '}' . '}';
                    $spintag_js[] = ['name' => $st['place_holder'], 'insert' => $wrap, 'display' => $wrap];
                }
            @endphp
            data.spintags = @json($spintag_js);
        @endif
    @endif

    {{-- Dynamic Content --}}
    @if(routeAccess('dynamictag.index'))
        @php
            $dynamic_contents = isset($dynamic_contents) ? $dynamic_contents : dynamicContents($adminOnClient ? ($autoresponder->user_id ?? null) : null);
        @endphp
        @if(isset($dynamic_contents) && count($dynamic_contents) > 0)
            data.dynamic = [
                @foreach($dynamic_contents as $i => $dc)
                @php
                    $label = str_replace(['[[',']]'], '', (string)$dc['label']);
                @endphp
                {{ $i > 0 ? ',' : '' }}{ name: @json($dc['name']), insert: "[[{{ $label }}]]", display: "[[{{ $label }}]]" }
                @endforeach
            ];
        @endif
    @endif

    {{-- Profile Fields --}}
    @php
        $package = getPackage();
        $skip = skipRoutesFor($package);
    @endphp
    @if(!in_array('profileFields.index', $skip))
        @php $profile_fields = \App\Models\ProfileField::getProfileFields(); @endphp
        @if(count($profile_fields) > 0)
            data.profile = [
                @foreach($profile_fields as $i => $field)
                {{ $i > 0 ? ',' : '' }}{ name: @json($field['name']), insert: "%%pf_{{ $field['tag'] }}%%", display: "%%pf_{{ $field['tag'] }}%%" }
                @endforeach
            ];
        @endif
    @endif

    return data;
})();
</script>

<script>
    {{-- Init TinyMCE editor — deferred until Content tab is visible.
         The broadcast page has Content as its first (active) tab, so TinyMCE always
         inits in a visible container. For drip, Details is the first tab, so we must
         wait until Content tab is shown to ensure correct iframe dimensions. --}}
    $(function() {
        if ($('#tab-content').hasClass('active')) {
            MumaraEditor.init('content_html', {fullPage: true, height: 500});
        } else {
            $('a[href="#tab-content"]').one('shown.bs.tab', function() {
                MumaraEditor.init('content_html', {fullPage: true, height: 500});
            });
        }
    });
</script>

<script>
    {{-- Leave-page warning --}}
    $("body").on("click", ".kt-menu__link,.kt-notification__item,.btn-signout", function() {
        var url = $(this).attr('href');
        if(url!=='javascript:;'){
            Swal.fire({
                title: "",
                text: "{!! trans('broadcasts.form.alert_message.leave_page') !!}",
                iconHtml: `<div class="d-flex align-items-center justify-content-center rounded-circle bg-white shadow-sm border border-2 border-info swal-icon">
                    <div class="d-flex align-items-center justify-content-center">
                        <i class="fa fa-question text-info"></i>
                    </div>
                </div>`,
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#3085d6',
                cancelButtonText: "{{trans('common.keep_editing')}}",
                confirmButtonText: "{{trans('common.leave')}}",
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = $(this).attr('href');
                }
            });
            return false;
        }
    });
</script>

@if(in_array('Emojis', whmcsAddOns()))
<script src="{{ asset('themes/default/js/emojies/emojies.min.js') }}"></script>
<style type="text/css">.emoji-picker{margin:0 .5em;border:1px solid #999;border-radius:5px;box-shadow:0 0 3px 1px #ccc;background:#fff;width:20.5rem;height:27.5rem;font-family:Arial,Helvetica,sans-serif;z-index:9;}.emoji-picker__content{padding:.5em;height:20.5rem}.emoji-picker__preview{height:2em;padding:.5em;border-top:1px solid #999;display:flex;flex-direction:row;align-items:center}.emoji-picker__preview-emoji{font-size:2em;margin-right:.25em}.emoji-picker__preview-name{color:#666;font-size:.85em;overflow-wrap:break-word;word-break:break-all}.emoji-picker__tabs{margin:0;padding:0;display:flex}.emoji-picker__tab{list-style:none;display:inline-block;padding:0 .5em;cursor:pointer;flex-grow:1;text-align:center}.emoji-picker__tab.active{border-bottom:3px solid #4f81e5;color:#4f81e5}.emoji-picker__tab-body{display:none;margin-top:.5em}.emoji-picker__tab-body h2{font-size:.75rem;text-transform:uppercase;color:#333;margin:0}.emoji-picker__tab-body.active{display:block}.emoji-picker__emojis{height:18rem;overflow-y:scroll;display:flex;flex-wrap:wrap;align-content:flex-start;width:calc(1.3rem * 1.5 * 10);margin:auto}.emoji-picker__emoji{background:0 0;border:none;border-radius:5px;cursor:pointer;font-size:1.3rem;width:1.5em;height:1.5em;padding:0;margin:0}.emoji-picker__emoji:hover{background:#e8f4f9}.emoji-picker__search-container{margin:.5em;position:relative;height:2em;display:flex}.emoji-picker__search-container input{box-sizing:border-box;width:100%;border-radius:5px;border:1px solid #ccc;padding-right:2em}.emoji-picker__search-icon{position:absolute;color:#ccc;width:1em;height:1em;right:.75em;top:calc(50% - .5em)}.emoji-picker__search-not-found{color:#666;text-align:center;margin-top:2em}.emoji-picker__search-not-found-icon{font-size:3em}.emoji-picker__search-not-found h2{margin:.5em 0;font-size:1em}.emoji-block>input#email_subject,#email_pre_header_input {border-top-right-radius: 0;border-bottom-right-radius: 0;} button#emoji-button>svg, #emoji-button-pre-header >svg {width: 20px;height: 20px;} button#emoji-button,#emoji-button-pre-header {border: 1px solid var(--form-control-border-color) !important;border-left: 0 !important;width: 40px;text-align: center;align-items: center;justify-content: center;display: flex;border-top-right-radius: 4px;border-bottom-right-radius: 4px;} .emoji-picker__tab>svg {font-size: 20px;} .emoji-picker__tab.active {border-bottom: 3px solid #0f997f;color: #0f997f;} .emoji-picker__preview {height: 4.5em;margin-top: 1em;}</style>
<script>
    window.addEventListener('DOMContentLoaded', () => {
        EmojiButton(document.querySelector('#emoji-button'), function (emoji) {
            document.getElementById('email_subject').value += emoji;
            $('#email_subject').trigger('input');
        });
        EmojiButton(document.querySelector('#emoji-button-pre-header'), function (emoji) {
            document.getElementById('email_pre_header_input').value += emoji;
            $('#email_pre_header_input').trigger('input');
        });
    });
</script>
@endif

{{-- Copy as text --}}
<script>
    window.mcCopyAsText = function() {
        var content_html = MumaraEditor.getContent('content_html');
        jQuery('#content_js').html(content_html.replace(/<!--.*?-->/sg, "").replace(/(<link([^>]+)>)/ig, "")).find('a').each(function(){
            var href=jQuery(this).attr('href');
            var label=jQuery(this).text();
            if(href && href !="#"){
                var link= (label && label !="") ? label +":"+ href:href;
            }else{
                var link=label;
            }
            jQuery(this).replaceWith(link);
        });
        content_html=jQuery('#content_js').html();
        $(".blockUI").show();
        $.ajax({
            url: "{{ route('converHtmlToText') }}",
            type: "POST",
            data: {html: content_html},
            success: function(result) {
                $(".blockUI").hide();
                $('#content_text').val(result);
            },
            error: function(err) {
                $(".blockUI").hide();
            }
        });
    };

    {{-- Generate Subject with AI --}}
    $(document).on('click', '#mc-ai-generate-subject', function() {
        var $btn = $(this);
        var contentHtml = MumaraEditor.getContent('content_html');
        if (!contentHtml || contentHtml.trim().length < 50) {
            toastr.warning("{{ trans('ai_settings.generate.add_content_first_subject') }}");
            return;
        }
        $btn.prop('disabled', true).html('<i class="la la-spinner la-spin"></i> {{ trans("ai_settings.generate.button_generating") }}');
        $.ajax({
            url: "{{ route('broadcasts.ai.generate-subject') }}",
            type: 'POST',
            data: { content_html: contentHtml },
            success: function(res) {
                if (res.success) {
                    $('#email_subject').val(res.subject).trigger('input');
                    toastr.success("{{ trans('ai_settings.generate.subject_generated') }}");
                } else {
                    toastr.error(res.message || "{{ trans('ai_settings.generate.failed_generate_subject') }}");
                }
            },
            error: function(xhr) {
                var msg = xhr.responseJSON?.message || "{{ trans('ai_settings.generate.failed_generate_subject') }}";
                toastr.error(msg);
            },
            complete: function() {
                $btn.prop('disabled', false).html('<i class="la la-magic"></i> {{ trans("ai_settings.generate.button_label") }}');
            }
        });
    });

    {{-- Generate Pre-header with AI --}}
    $(document).on('click', '#mc-ai-generate-preheader', function() {
        var $btn = $(this);
        var contentHtml = MumaraEditor.getContent('content_html');
        if (!contentHtml || contentHtml.trim().length < 50) {
            toastr.warning("{{ trans('ai_settings.generate.add_content_first_preheader') }}");
            return;
        }
        $btn.prop('disabled', true).html('<i class="la la-spinner la-spin"></i> {{ trans("ai_settings.generate.button_generating") }}');
        $.ajax({
            url: "{{ route('broadcasts.ai.generate-preheader') }}",
            type: 'POST',
            data: { content_html: contentHtml },
            success: function(res) {
                if (res.success) {
                    $('#email_pre_header_input').val(res.preheader).trigger('input');
                    toastr.success("{{ trans('ai_settings.generate.preheader_generated') }}");
                } else {
                    toastr.error(res.message || "{{ trans('ai_settings.generate.failed_generate_preheader') }}");
                }
            },
            error: function(xhr) {
                var msg = xhr.responseJSON?.message || "{{ trans('ai_settings.generate.failed_generate_preheader') }}";
                toastr.error(msg);
            },
            complete: function() {
                $btn.prop('disabled', false).html('<i class="la la-magic"></i> {{ trans("ai_settings.generate.button_label") }}');
            }
        });
    });

    {{-- Generate Text Body with AI --}}
    $(document).on('click', '#mc-ai-generate-text', function() {
        var $btn = $(this);
        var contentHtml = MumaraEditor.getContent('content_html');
        if (!contentHtml || contentHtml.trim().length < 50) {
            toastr.warning("{{ trans('ai_settings.generate.add_content_first_text') }}");
            return;
        }
        $btn.prop('disabled', true).html('<i class="la la-spinner la-spin"></i> {{ trans("ai_settings.generate.button_generating") }}');
        $.ajax({
            url: "{{ route('broadcasts.ai.generate-text-body') }}",
            type: 'POST',
            data: { content_html: contentHtml },
            success: function(res) {
                if (res.success) {
                    $('#content_text').val(res.text_body);
                    toastr.success("{{ trans('ai_settings.generate.text_body_generated') }}");
                } else {
                    toastr.error(res.message || "{{ trans('ai_settings.generate.failed_generate_text_body') }}");
                }
            },
            error: function(xhr) {
                var msg = xhr.responseJSON?.message || "{{ trans('ai_settings.generate.failed_generate_text_body') }}";
                toastr.error(msg);
            },
            complete: function() {
                $btn.prop('disabled', false).html('<i class="la la-magic"></i> {{ trans("ai_settings.generate.button_label") }}');
            }
        });
    });
</script>

{{-- File uploader --}}
<script src="{{ asset('themes/default/js/jquery.dm-uploader.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('themes/default/js/demo-ui.js') }}?v={{$local_version}}" type="text/javascript"></script>
<script type="text/html" id="files-template">
    <li class="mc-file-row">
        <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">%%filename%%</strong> <span class="text-muted">{{trans('broadcasts.add.form.file_upload.waiting')}}</span></div>
            <div class="progress" style="height:4px;border-radius:4px;margin:0;overflow:hidden;">
                <div class="progress-bar progress-bar-success progress-bar-animated"
                     role="progressbar" style="width:0%;font-size:0;line-height:4px;border-radius:4px;"
                     aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
        <input type="hidden" name="has_images[]" value="%%filename%%">
        <div class="mc-file-row__remove removeFile del-action-danger" data-file=""><i class="la la-trash"></i></div>
    </li>
</script>
<script type="text/javascript">
    $(function(){
        $(document).on("click", ".removeFile", function() {
            var $row = $(this).closest('li');
            var file_name = $row.find('.filename').html();
            var list_block_id = $row.attr('id');
            $.ajax({
                url: "{{ route('dripImageDelete') }}",
                type: "POST",
                data: {"file_name": file_name, 'from': 'temp'},
                success: function(result) {
                    if(result=='success'){
                        $("#"+list_block_id).remove();
                        $("#imgMsg").append("<li><strong>" + file_name + "</strong> {{trans('broadcasts.form.file_upload.info_message.successfully_removed')}}</li>");
                    }
                }
            });
        });

        $(document).on("click", ".removeFile2", function() {
            var $row = $(this).closest('li');
            var file_name = $row.find('.filename').html();
            var list_block_id = $row.attr('id');
            $.ajax({
                url: "{{ route('dripImageDelete') }}",
                type: "POST",
                data: {"file_name": file_name, "from": $("#drip_id").val()},
                success: function(result) {
                    if(result=='success'){
                        $("#"+list_block_id).remove();
                        $("#imgMsg").append("<li><strong>" + file_name + "</strong> {{trans('broadcasts.form.file_upload.info_message.successfully_removed')}}</li>");
                    }
                }
            });
        });

        @php
            $ae = get_allowed_extensions();
            $allowed_extensions = !empty($ae) ? json_encode($ae) : '';
            $msg = trans('application_settings.broadcast.form.allowed_extensions_msg');
            $lae = trans('application_settings.broadcast.form.list_allowed_extensions_msg')." <b>.".strtoupper(implode(', .', $ae))."</b>";
            $max_file = file_upload_max_size();
            $max_file_MB = ($max_file/1024)/1024;
        @endphp
        var max_file = <br />
<font size='1'><table class='xdebug-error xe-warning' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Warning: Undefined variable $max_file in /home/mohamma2/public_html/subdomains/new.mohammad.jt.mumara.dev/resources/views/themes/default/autoresponder/create.blade.php on line <i>368</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0010</td><td bgcolor='#eeeeec' align='right'>464136</td><td bgcolor='#eeeeec'>{main}(  )</td><td title='/home/mohamma2/public_html/subdomains/new.mohammad.jt.mumara.dev/resources/views/themes/default/autoresponder/create.blade.php' bgcolor='#eeeeec'>.../create.blade.php<b>:</b>0</td></tr>
</table></font>
;
        $('#drag-and-drop-zone').dmUploader({
            url: '{{route('dripUploadImages')}}?drip_id='+$("#drip_id").val(),
            maxFileSize: max_file,
            @if($allowed_extensions)
            extFilter: <br />
<font size='1'><table class='xdebug-error xe-warning' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Warning: Undefined variable $allowed_extensions in /home/mohamma2/public_html/subdomains/new.mohammad.jt.mumara.dev/resources/views/themes/default/autoresponder/create.blade.php on line <i>373</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0010</td><td bgcolor='#eeeeec' align='right'>464136</td><td bgcolor='#eeeeec'>{main}(  )</td><td title='/home/mohamma2/public_html/subdomains/new.mohammad.jt.mumara.dev/resources/views/themes/default/autoresponder/create.blade.php' bgcolor='#eeeeec'>.../create.blade.php<b>:</b>0</td></tr>
</table></font>
,
            onFileExtError: function(file){
                $('#FileSizeError').html("{!! $lae !!}").show();
            },
            @endif
            onDragEnter: function(){ this.addClass('active'); },
            onDragLeave: function(){ this.removeClass('active'); },
            onInit: function(){ ui_add_log('{{trans('broadcasts.form.file_upload.info-message.status_initialized')}}:)', 'info'); },
            onComplete: function(){ ui_add_log('{{trans('broadcasts.form.file_upload.success_message.transfers_finished')}}'); },
            onNewFile: function(id, file){ ui_add_log('{{trans('broadcasts.form.file_upload.info_message.file_added')}} #' + id); ui_multi_add_file(id, file); },
            onBeforeUpload: function(id){
                $('#FileSizeError').html("{!! trans('common.message.FileSizeError',['max_file'=>$max_file_MB."MB"]) !!}").hide();
                ui_add_log('{{trans('broadcasts.form.file_upload.info_message.uploading_start')}} #' + id);
                ui_multi_update_file_status(id, 'uploading', '{{trans('broadcasts.form.file_upload.info_message.uploading')}}...');
                ui_multi_update_file_progress(id, 0, '', true);
            },
            onUploadCanceled: function(id) {
                ui_multi_update_file_status(id, 'warning', '{{trans('broadcasts.form.file_upload.info_message.cancelled_by_user')}}');
                ui_multi_update_file_progress(id, 0, 'warning', false);
            },
            onUploadProgress: function(id, percent){ ui_multi_update_file_progress(id, percent); },
            onUploadSuccess: function(id, data){
                ui_add_log('{{trans('broadcasts.form.file_upload.error_message.server_response_for_file')}} #' + id + ': ' + JSON.stringify(data));
                ui_add_log('{{trans('broadcasts.form.file_upload.success_message.file_uploaded')}} #' + id, 'success');
                ui_multi_update_file_status(id, 'success', '{{trans('broadcasts.form.file_upload.success_message.upload_completed')}}');
                ui_multi_update_file_progress(id, 100, 'success', false);
            },
            onUploadError: function(id, xhr, status, message){
                ui_multi_update_file_status(id, 'danger', message);
                ui_multi_update_file_progress(id, 0, 'danger', false);
            },
            onFallbackMode: function(){ ui_add_log('{{trans('broadcasts.form.file_upload.error_message.fallback_error')}}', 'danger'); },
            onFileSizeError: function(file){
                $('#FileSizeError').html("{!! trans('common.message.FileSizeError',['max_file'=>$max_file_MB."MB"]) !!}").show();
            }
        });
    });
</script>

{{-- Set tab order for drip page before loading the shared v2 JS --}}
<script>
    window.mcTabOrder = ['#tab-details', '#tab-content', '#tab-preview'];
</script>

{{-- Shared v2 JS (tabs, variable picker, counters, collapsible cards, preheader toggle) --}}
<script src="{{ asset('js/campaign-create-v2.js') }}?v={{$local_version}}" type="text/javascript"></script>

{{-- Drip-specific JS (form submit, interval toggle, test email) --}}
<script src="{{ asset('js/drip-create-v2.js') }}?v={{$local_version}}" type="text/javascript"></script>

@endsection

@section(decide_content())

{{-- Flash messages --}}
<div class="mc-messages">
    @if($errors->any())
        <div class="alert alert-danger">
            @foreach($errors->all() as $error)
                <p>{{ $error }}</p>
            @endforeach
        </div>
    @endif
    @if (Session::has('msg'))
        <div class="alert alert-success">{{ Session::get('msg') }}</div>
    @endif
    <div id="msg" class="display-hide">
        <button class="close" data-close="alert"></button>
        <span id='msg-text' class="alert-text"></span>
    </div>
</div>

<div id="content_js" style="display: none"></div>

<div class="mc-page">
    {{-- === MAIN DRIP FORM wrapping all tabs === --}}
    @if ($page_data['action'] == 'add')
    <form action="{{route('drips.store')}}" method="POST" id="kt_form" class="kt-form kt-form--label-right" autocomplete="off">
        <input type="hidden" id="action" value="add">
        <input type="hidden" id="drip_id" value="0">
    @else
    <form action="{{ route('drips.update', $autoresponder->id) }}" method="POST" id="kt_form" class="kt-form kt-form--label-right" autocomplete="off">
        <input type="hidden" id="action" value="edit">
        <input type="hidden" name="_id" value="{{$autoresponder->id}}">
        <input type="hidden" name="_method" value="PUT">
        <input type="hidden" id="drip_id" value="{{$autoresponder->id}}">
    @endif
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
        <input type="hidden" id="EditiorHTMLVal" name="EditiorHTMLVal" value="">
        <input type="hidden" id="page_data_action" value="{{ $page_data['action'] }}">
        <input type="hidden" id="btnAction" name="btnAction" value="0">

        {{-- Tab Navigation --}}
        <ul class="nav mc-tabs" role="tablist">
            <li class="nav-item">
                <a href="#tab-details" class="nav-link active" data-toggle="tab" role="tab">
                    <i class="la la-info-circle"></i> {{trans('drip.campaign.form.tab_1.form_heading')}}
                    <span class="mc-tab-badge" style="display:none;"></span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#tab-content" class="nav-link" data-toggle="tab" role="tab">
                    <i class="la la-file-text"></i> {{trans('drip.campaign.form.tab_3.form_heading')}}
                    <span class="mc-tab-badge" style="display:none;"></span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#tab-preview" class="nav-link" data-toggle="tab" role="tab">
                    <i class="la la-eye"></i> {{ trans('broadcasts.tabs.preview') }}
                    <span class="mc-tab-badge" style="display:none;"></span>
                </a>
            </li>
        </ul>

        {{-- Tab Content --}}
        <div class="mc-tab-content tab-content">
            <div class="tab-pane active" id="tab-details" role="tabpanel">
                @include('autoresponder.partials._tab-details')
            </div>
            <div class="tab-pane" id="tab-content" role="tabpanel">
                @include('autoresponder.partials._tab-content')
            </div>
            <div class="tab-pane" id="tab-preview" role="tabpanel">
                @include('autoresponder.partials._tab-preview')
            </div>
        </div>

        {{-- Sticky Action Bar --}}
        <div class="mc-action-bar">
            <button type="button" class="mc-btn mc-btn--primary" id="mc-next-btn" onclick="mcSaveAndNext()">
                <i class="fa fa-arrow-right"></i> <span id="mc-save-label">{{trans('common.form.button.continue')}}</span>
            </button>
            <button type="submit" name="save" class="mc-btn mc-btn--primary" id="DbSave" value="save" onclick="$('#btnAction').val(0)" style="display:none;">
                <i class="la la-check"></i> {{trans('common.form.button.save')}}
            </button>
            <button type="submit" name="edit" class="mc-btn" value="edit" onclick="$('#btnAction').val(1)">
                <i class="la la-save"></i> {{trans('common.form.button.save_and_keep_editing')}}
            </button>
            <button type="button" class="mc-btn" id="mc-back-btn" onclick="mcGoBack()" style="display:none;">
                <i class="la la-arrow-left"></i> {{trans('common.form.button.back')}}
            </button>
            <span class="mc-action-spacer"></span>
            <a href="{{ route('drips.index') }}" class="mc-btn">{{trans('common.form.button.cancel')}}</a>
        </div>
    </form>
</div>

{{-- Modals (outside the form) --}}
@include('autoresponder.partials._modals')

@endsection