@extends('modules.head') @section('contenido')

<div class="placeholders_wrapper">
    <div id="select_destination_container">
        <h4 style="margin-bottom: 5px; color:#3c8dbc">Select placeholder location:</h4>
        <select id="select_destination" name="placeholder_destination" class="form-control">
            <option value="0">Choose...</option>
            @foreach($placeholders_destinations as $placeholders_destination)
            <option value="{{ $placeholders_destination->id }}">{{ $placeholders_destination->description }}</option>
            @endforeach
        </select>
    </div>

    <div id="create_placeholder_container" style="display:none">
        <br>
        <p>
            <a class="btn show_editor_btn" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Create placeholder</a>
        </p>
        <div class="row">
            <div class="col">
                <div class="collapse multi-collapse" id="multiCollapseExample1">
                    <div class="card card-body">
                        <div class="placeholder"></div>
                        <p>
                            <a id="save" class="btn btn-secondary" role="button">Save</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
<style>
    .placeholders_wrapper {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    #select_destination {
        width: 30vw;
    }

    .show_editor_btn {
        background-color: #eb1c24;
        color: white;
        padding: 10px;
        border-radius: 15px;
    }

    .show_editor_btn:hover,
    .show_editor_btn:focus,
    .show_editor_btn:active {
        color: white !important;
    }

    .note-editor {
        background-color: white;
        padding: 5px;
        margin-left: 15px;
    }

    .note-group-select-from-files {
        display: none;
    }

    .note-btn-group .note-btn {
        margin: 5px;
    }
</style>
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $.getScript('https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote-bs4.min.js', function() {
            $('.placeholder').summernote({
                toolbar: [
                    // [groupName, [list of button]]
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['height', ['height']],
                    ['insert', ['picture']],
                ],
                callbacks: {
                    onImageLinkInsert: function(url) {
                        // url is the image url from the dialog
                        $img = $('<img>').attr({
                            src: url
                        })
                        $('.placeholder').summernote('insertNode', $img[0]);
                    }
                },
                disableDragAndDrop: true
            });
        });

        let destination_selected = '';
        // handle select destination
        $("#select_destination").change(function() {
            destination_selected = $(this).val();
            $('#create_placeholder_container').hide();
            if (destination_selected != 0) {
                $('#create_placeholder_container').show();
            }
        })

        // create_placeholder_container
        $('#save').on('click', function(event) {

            swal({
                    title: "Are you sure?",
                    text: "If there's content linked to this location, it'll be replaced.",
                    icon: "warning",
                    buttons: true,
                })
                .then((yes) => {
                    if (yes) {
                        let markup = $('.placeholder').summernote('code');

                        let data = {
                            destination_id: destination_selected,
                            markup: markup
                        }
                        let url = '/invoices-post-placeholder';
                        $.ajax({
                            type: "POST",
                            dataType: "json",
                            headers: {
                                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                            },
                            data: data,
                            url: url,
                            success: function(r) {
                                if (r.status == 'success') {
                                    let isEmpty = $(r.new_record.content.replace(/&nbsp;|<br>/g, ' ')).text().trim() == '';
                                    let isAnImg = false;

                                    let content = r.new_record.content;
                                    let img_tag_text = "<img";
                                    if (content.indexOf(img_tag_text) != -1) {
                                        isAnImg = true;
                                    }


                                    if (isEmpty && !isAnImg) {
                                        swal({
                                            title: "Success!",
                                            text: 'Empty space was created for selected placeholder.',
                                            icon: "success"
                                        }).then(() => {
                                            location.reload();
                                        })
                                    } else {
                                        swal({
                                            title: "Success!",
                                            text: r.message,
                                            icon: "success"
                                        }).then(() => {
                                            location.reload();
                                        })
                                    }

                                } else if (r.status == 'error') {
                                    swal({
                                        title: "Error",
                                        text: r.message,
                                        icon: "error"
                                    }).then(() => {
                                        location.reload();
                                    })
                                }
                            },
                            error: function(e) {
                                console.log(e)
                            },
                        });
                    } else {

                    }
                });









        });

    });
</script>