@if(isset($email))
<div class="modal fade email-preview-modal bt-modal" id="email-preview-modal" tabindex="-1" role="dialog" aria-labelledby="email-preview-modal">
    <div class="modal-dialog modal-lg bt-modal-dialog" id="email-preview-dialog">
        <div class="modal-content">
            <div class="modal-header" id="email_preview_header"></div>
            <div class="modal-body" id="email_preview_body"></div>
            <div class="modal-footer" id="email_preview_footer">
                <button id="close_modal_btn" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
    var modal_selector = {
        modal_header: "email_preview_header",
        modal_name: "email-preview-modal",
        modal_body: "email_preview_body",
        modal_footer: "email_preview_footer"
    };

    var promo_selector = {
        landing_page: "landing_page",
        mosaic_images: "mosaic_images",
        network_type_email: "network_type_email",
        network_promo: "network_promo"
    };

    function clear_preview() {
        document.getElementById(modal_selector.modal_header).innerHTML = '';
        document.getElementById(modal_selector.modal_body).innerHTML = '';
    }

    function show_preview(get_url) {
        clear_preview();

        $.ajax({
            type: "GET",
            url: get_url,
            success: function(result) {
                {{--if (result.type == '{{ \App\Http\Controllers\OldPromoRequestController::promo_preview }}') {--}}
                    {{--show_promo_preview(result);--}}
                {{--} else if (result.type == '{{ \App\Http\Controllers\OldArticleRequestController::ORIG_PREVIEW }}') {--}}
                    {{--show_preview_original(result);--}}
                {{--} else {--}}
                    $('#'+modal_selector.modal_header).hide();
                    document.getElementById(modal_selector.modal_body).innerHTML = result.body;
                    if (result.buttons) {
                        document.getElementById(modal_selector.modal_footer).innerHTML = result.buttons;
                    }
                    $('#'+modal_selector.modal_name).modal('show');
                // }
            }
        });
    }

    function show_preview_original(result) {
        $('#'+modal_selector.modal_header).hide();
        document.getElementById(modal_selector.modal_body).innerHTML = result.body;
        $('#'+modal_selector.modal_footer).hide();

        // sets title attribute when previewing original article on article request view page.
        @if(substr_count(URL::current(), 'article_request'))
            $('#email-preview-dialog').attr('title', '{{ $email->email_name }} (Original Article)');
        @endif

        var preview_dialog = $( "#email-preview-dialog" );

        preview_dialog.dialog({
            resizable: true,
            draggable: true,
            width: 800,
            modal: false,
            // we want to control the close button instead of just show the default
            closeOnEscape: true,
            dialogClass: "no-close",
            resize: function(event, ui) {
                auto_grow_by_class('bt-textarea-direction', 'modal-body');
                auto_grow('excerpt');
            },
            open: function( event, ui ) {
                document.body.scrollTop = document.documentElement.scrollTop = 0;
            },
            buttons: [
                {
                    text: "CANCEL",
                    "class": 'bt-label bt-btn-medium uppercase bt-button',
                    click: function() {
                        $( this ).dialog( "close" );
                    }
                }
            ]
        });
        // add these classes for extra styling
        $('.modal-dialog').addClass('preview-original');
        $('.modal-body').addClass('preview-original');
        preview_dialog.show();
        // position and top didn't seem to work.  But setting the styling after we show it puts this dialog below the header and to the right of the sidebar
        $(".ui-dialog").css({ 'top': '87px', 'left': '200px'});

        auto_grow_by_class('bt-textarea-direction', 'modal-body');
        auto_grow('excerpt');
    }

    {{--function show_promo_preview(result) {--}}
        {{--$('#'+modal_selector.modal_header).show();--}}
        {{--document.getElementById(modal_selector.modal_header).innerHTML = result.header;--}}
        {{--document.getElementById('close_modal_btn').innerText = 'Cancel';--}}
        {{--document.getElementById(modal_selector.modal_body).innerHTML = result.body;--}}
        {{--on_change_promo_view("{{ \App\Http\Controllers\OldPromoRequestController::subscriber_email }}");--}}
        {{--$('#'+modal_selector.modal_name).modal('show');--}}
    {{--}--}}

{{--    function on_change_promo_view(value) {
        var land_page = $('#'+promo_selector.landing_page);
        var mosaic = $('#'+promo_selector.mosaic_images);
        var net_promo = $('#'+promo_selector.network_promo);
        var net_email = $('#'+promo_selector.network_type_email);

        switch (value)
        {
            case "{{ \App\Http\Controllers\OldPromoRequestController::subscriber_email }}":
                land_page.hide();
                mosaic.hide();
                net_promo.hide();
                net_email.show();
                break;
            case "{{ \App\Http\Controllers\OldPromoRequestController::landing_page }}":
                land_page.show();
                mosaic.hide();
                net_promo.hide();
                net_email.hide();
                break;
            case "{{ \App\Http\Controllers\OldPromoRequestController::network_promo }}":
                land_page.hide();
                mosaic.hide();
                net_promo.show();
                net_email.hide();
                break;
            case "{{ \App\Http\Controllers\OldPromoRequestController::mosaic_images }}":
                land_page.hide();
                mosaic.show();
                net_promo.hide();
                net_email.hide();
                break;
        }
    }--}}

</script>

<style>
    .bt-modal-header #view_options_label_div {
        width: 45px;
    }
    #ui-id-1 {
        font-family: "OpenSans-Light", "Open Sans Light", "Open Sans", sans-serif;
        font-weight: 100;
    }
    .ui-dialog-buttonpane.ui-widget-content.ui-helper-clearfix {
        background-color: #5e5e5e;
        margin: 0 -4px -4px;
    }
    .ui-draggable .ui-dialog-titlebar {
        margin: -4px -4px 0;
        border-radius: 0;
    }
    .no-close .ui-dialog-titlebar-close {
        display: none;
    }
    .preview-original {
        margin: 0 0 0 0 !important;
        padding: 2px 2px 2px 2px !important;
    }
    .modal-body.preview-original {
        flex: auto;
        width: 100%;
    }
    .modal-body.preview-original .row {
        margin: 0 0 0 0 !important;
        padding: 0 0 0 0 !important;
    }
    .modal-footer .bt-button:hover {
        background-color: white;
    }
</style>
@endif