@extends('frontend.layouts.app')
@section('title', app_name() . ' | ' . __('navs.frontend.dashboard') )
@push('after-scripts')
    <script>
        'use strict';

        var grid;

        var drake = dragula();

        const baseurl = '{{URL::to('/')}}';
        var folder_info = {!! $folders !!};
        const lab_id = {!! $lab->id !!};

        var currentPage = 1;
        // the packery grid object

        labsettingshide();

        const infopopovercontent = '<div class="d-flex flex-column w-100">' +
            '<div class="w-100 mb-1 info_details_description"></div>' +
            '<div class="w-100 mb-1 "><span style="font-weight: bold">Author:</span> <span class="info_details_author"></span></div>' +
            '<div class="w-100 mb-1 "><span style="font-weight: bold">Dimensions:</span> <span class="info_details_dimensions"></span> </div>' +
            '<div class="w-100 mb-1 "><span style="font-weight: bold">Tags:</span> <span class="info_details_tags"></span> </div>' +
            '<div class="w-100 mb-1 "><span style="font-weight: bold">Folder:</span></div>' +
            '<div class="w-100 info_details_folder"></div>' +
            '</div>';

        const makeNewBoardFolder = () => {
            if (!$('#new_folder_name').val() || $('#new_folder_name').val() == null) {
                alert("Please Give the folder name");
                return false;
            }
            axios({
                url: baseurl + '/board/newfolder',
                method: 'POST',
                data: {
                    label: $('#new_folder_name').val(),
                    lab_id: lab_id
                }
            }).then((response) => {
                if (response.data.status == 0) {
                    // insert new folder into the DOM here
                    //@TODO clean this up, sync with what's already there
                    // let newElement = $('<div class="d-flex flex-row mt-1 board-folder" style="border: 1px solid gray; cursor:pointer;" onclick="showBoards(' + response.data.id + ')">' +
                    //     '<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" fill="currentColor" class="bi bi-folder2" viewBox="0 0 16 16">' +
                    //     '<path d="M1 3.5A1.5 1.5 0 0 1 2.5 2h2.764c.958 0 1.76.56 2.311 1.184C7.985 3.648 8.48 4 9 4h4.5A1.5 1.5 0 0 1 15 5.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 12.5v-9zM2.5 3a.5.5 0 0 0-.5.5V6h12v-.5a.5.5 0 0 0-.5-.5H9c-.964 0-1.71-.629-2.174-1.154C6.374 3.334 5.82 3 5.264 3H2.5zM14 7H2v5.5a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V7z"></path>' +
                    //     '</svg>' +
                    //     '<div class="g_et_al_header3">' + response.data.label + '</div>' +
                    //     '</div>');
                    let newElement = $('<label class="container folder_sortable p-0" style="border: none;border-bottom: 1px solid;" id="parent_lable_' + response.data.id + '">' +
                        '<input type="radio" name="folder_selection" value="' + response.data.id + '" onchange="showBoards(' + response.data.id + ')" >' +
                        '<div class="d-flex flex-row board-folder">' +
                        '<div class="folder-status-img" style="color: blue;"><svg class="g_et_al_fill_accent" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150.94 126.07"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M148.05,26.25a10.66,10.66,0,0,0-8-3.55h-4.3c-.84-4.6-4.35-8.09-8.52-8.09H52.12V10.16C52.12,4.56,48.23,0,43.44,0H8.68C3.93,0,0,4.56,0,10.16V112.69a11.41,11.41,0,0,0,1.45,5.61,10.6,10.6,0,0,0,8.62,7.62,10.31,10.31,0,0,0,1.77.15H130.36c6.34,0,12-5.35,12.66-11.92l7.85-78.91A11.6,11.6,0,0,0,148.05,26.25Zm-3.3,8.36-7.85,78.93c-.34,3.46-3.34,6.38-6.54,6.38H11.84a4.77,4.77,0,0,1-.78-.07c-2.54-.38-4.23-2.82-3.92-5.7l7.73-78,.09-.94c.36-3.47,3.36-6.4,6.55-6.4H140a4.61,4.61,0,0,1,3.46,1.51A5.41,5.41,0,0,1,144.75,34.61Z"></path></g></g></svg></div>' +
                        '<div class="g_et_al_header3" id="folder_radio_label_' + response.data.id + '">' + response.data.label +
                        '</div>' +
                        '<div class="dropdown filter_dropdown newfolder">' +
                        '<button class="create-btn dropdown-toggle" type="button" data-toggle="dropdown" style="height:22px;float:right;">' +
                        '<i class="fa fa-plus" aria-hidden="true"></i></button>' +
                        '<div class="dropdown-menu" style="z-index:1;">' +
                        '<h5 class="g_et_al_header5">New Folder</h5>' +
                        '<div class="form-group">' +
                        '<input type="text" class="form-control" id="new_folder_name_' + response.data.id + '" placeholder="Folder name">' +
                        '</div>' +
                        '<div class="form-group create_btn">' +
                        '<button type="button" class="btn btn-primary" onclick="makeNewLabBoardFolder(' + lab_id + ',' + response.data.id + ')">Create' +
                        '</button>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '<div class="folder-actions flex-grow-1 pr-1">' +

                        '</div>' +
                        '<div class="float-right folder-div-after" id="arraw_icon_' + response.data.id + '" style="display:none" ></div>' +
                        ' </div>' +
                        '</label> ' +
                        '<div class="folder_collapse panel-collapse sub-folders collapse" id="folder-' + response.data.id + '" style="display:none">' +
                        '</div>')
                    $('#folder_list').append(newElement);
                    //@TODO add this to the var folder_info
                    $('#new_folder_name').val("");

                } else {
                    alert('something went wrong with the operation');
                }
            }).catch(function (error) {
                console.log(error);
                alert('something went wrong with the operation');
            }).finally(() => {
                // wait(false);
            });
        }

        $(document).ready(() => {
            @if(isset($_GET['edit']) && $_GET['edit']=="open" )
            openeditlabmodal();
            @endif

            // add base tooltop functionality
            tippy('[data-tippy-content]');

            // select2 initialisation
            // tags
            $('.tagsselect').select2({
                placeholder: 'Select tags...',
            });

            $('.templateselect').select2({
                placeholder: 'Select template type...',
            });

            // folders
            $(".folderselect").select2({
                data: $.map(folder_info, (obj) => {
                    obj.text = obj.text || obj.label; // replace name with the property used for the text
                    return obj;
                })
            })

            // select folders in

            // bit of dynamic for custom sizes
            $("#size").change((e) => {
                if ($(e.target).val() == 'custom') {
                    $("#custom_size").show();
                    $("#custom_size").attr('required', 'required');
                } else {
                    $("#custom_size").hide()
                    $("#custom_size").removeAttr('required');
                }
            });

            // little optimisation to only load templates when it's necessary
            $('#new_board_from_template').on('shown.bs.modal', function (e) {
                if (!template_modal_init) {
                    initTemplates();
                }
            });


            // update board population
            $('#update_board').on('shown.bs.modal', (el) => {
                $(".popover").popover('hide');

                getBoardDetails($(el.relatedTarget).data('id'))
            });

            $('#update_board').submit((event) => {
                console.log('submitting update form')
                // cancels the form submission
                event.preventDefault();
                $('#update_board').modal('hide');
                //  var vars = $("#newmediadialog").find("form").serializeArray();
                var vars = $("#update_board").find("form").serialize();
                submitUpdateBoardForm(vars);
            });

            //board item list layout and animation
            console.log('about to load packery')
            grid = $('.board_grid').packery({
                // options
                itemSelector: '.grid-item',
                gutter: 10,
            });


            $('body').on('click', function (e) {
                $('.board_info_btn').each(function () {
                    if (!$(this).is(e.target) &&
                        $(this).has(e.target).length === 0 &&
                        $('.popover').has(e.target).length === 0) {
                        $(this).popover('hide');
                    }
                });
            });

            // drag to reorder folders
            drake = dragula([].slice.apply(document.querySelectorAll('.nested')),
                {

                    isContainer: function (el) {
                        return el.classList.contains('folder_sortable_droppable');
                    },

                })
                // what happens when we pick something up?
                .on('drag', (el, source) => {

                    // if it's a board preview. allow drag to inside folder else prevent
                    if (el.classList.contains('board_preview')) {
                        allowDragToFolder();
                    } else {
                        preventDragToFolder()
                    }
                })
                // what happens when we're over a target?
                .on('over', (el, container, source) => {
                    // clean up
                    $('.folder_sortable').removeClass("folder_sortable_over")
                    // if it's a board preview
                    if (el.classList.contains('board_preview')) {
                        // console.log('over container:');
                        // console.log(container);
                        if (container.classList.contains('folder_sortable_droppable')) {
                            $(container).addClass('folder_sortable_over')
                        }
                    }
                })

                // what happens when we drop the thing?
                .on('drop', (el, target, source, sibling) => {
                    // if it's a folder being dragged, reorder
                    // clean up
                    $('.folder_sortable').removeClass("folder_sortable_over")
                    $('.folder_sortable').removeClass("folder_sortable_droppable")

                    if ((el.classList.contains('folder_sortable') && (target.id == 'folder_list')) || (el.classList.contains('folder_sortable') && (target.classList.contains('sub-folders')))) {
                        console.log('dropping a folder')
                        // if it's been dropped to the boards, drop it back
                        console.log(target)

                        // send an array of elements to backend to reorder
                        let orderArray = ([]);
                        let orderint = 0;
                        $(".folder_sortable").each((index, item) => {

                            if ($(item).parent().hasClass('sub-folders')) {
                                orderArray.push({
                                    id: $(item).data('folderid'),
                                    sortorder: orderint,
                                    parentId: $(item).parent().data('parentid')
                                });
                            } else {
                                orderArray.push({id: $(item).data('folderid'), sortorder: orderint});
                            }

                            orderint++;
                        });
                        //console.log(orderArray)
                        // for some reason, the last element of this is always the element being moved.
                        console.log(orderArray);
                        orderArray.pop();

                        $("#" + el.id).after($("#folder-" + $(el).data('folderid')));

                        axios({
                            url: baseurl + '/board/reorderfolders',
                            method: 'POST',
                            data: {
                                order: JSON.stringify(orderArray)
                            }
                        }).then((response) => {
                            if (response.data.status == 0) {
                                // it's all good, do nothing or maybe pop up a little success notification?
                            } else {
                                // alert('something went wrong with the operation');
                            }
                        }).catch(function (error) {
                            console.log(error);
                            //alert('something went wrong with the operation');
                        }).finally(() => {
                            // wait(false);
                        });
                    } else if (el.classList.contains('board_preview') && target.classList.contains('folder_sortable')) {
                        // it's a board dropped onto a folder
                        let board_id = $(el).data('id');
                        let folder_id = $(target).data('folderid')
                        let source_folder_id = $('input[name="folder_selection"]:checked').val();
                        axios({
                            url: baseurl + '/board/addboardtofolder',
                            method: 'POST',
                            data: {
                                board_id: board_id,
                                folder_id: folder_id
                            }
                        }).then((response) => {

                            // kill off currently dragged element so it doesn't 'stick' weirdly to the folder
                            $(el).remove();
                            // refresh current folder
                            showBoards(source_folder_id)
                            // update the labels in the folders.
                            // reduce count in label of currently selected folder (but only if it's not the 'show all' one)
                            if (source_folder_id > 0) {
                                $("#folder_container_" + source_folder_id).data('count', $("#folder_container_" + source_folder_id).data('count') - 1);
                                $("#folder_count_" + source_folder_id).html($("#folder_container_" + source_folder_id).data('count'));
                            }
                            // increase count in label of target folder
                            $("#folder_container_" + folder_id).data('count', $("#folder_container_" + folder_id).data('count') + 1);
                            $("#folder_count_" + folder_id).html($("#folder_container_" + folder_id).data('count'));
                        }).catch(function (error) {
                            console.log(error);
                            alert('something went wrong with the operation');
                        }).finally(() => {
                            // wait(false);
                        });
                    } else {
                        revert(el)
                    }
                    // clean up
                    preventDragToFolder()

                }).on('cancel', (el, source, container) => {
                    // if it's cancelled, clean up styles
                    $('.folder_sortable').removeClass("folder_sortable_over")
                    $('.folder_sortable').removeClass("folder_sortable_droppable")
                });


            // load boards
            showBoards($('input[name="folder_selection"]:checked').val());

            $('#template_tags').on("change", (e) => {
                console.log('changing template tags')
                template_grid.packery('remove', $('.template-grid-item'));
                // clear selection
                if (scheduled_function) {
                    clearTimeout(scheduled_function)
                }
// setTimeout returns the ID of the function to be executed
                scheduled_function = setTimeout(getNewTemplatesFromTagsAndText, delay_by_in_ms, 1)
            });

            $('#template_type').on("change", (e) => {
                console.log('changing template type')
                template_grid.packery('remove', $('.template-grid-item'));
                // clear selection
                if (scheduled_function) {
                    clearTimeout(scheduled_function)
                }
// setTimeout returns the ID of the function to be executed
                scheduled_function = setTimeout(getNewTemplatesFromTagsAndText, delay_by_in_ms, 1)
            });


            $('#new_template_search_text').on("keyup", (e) => {
                console.log('new_element_clipart_text keyup')
                // clear selection
                template_grid.packery('remove', $('.template-grid-item'));
                if (scheduled_function) {
                    clearTimeout(scheduled_function)
                }

// setTimeout returns the ID of the function to be executed
                scheduled_function = setTimeout(getNewTemplatesFromTagsAndText, delay_by_in_ms, 1)
                // $("#new_element_clipart_col").find('*').not('.permanent').remove();

            });

            //'Infinite scroll' on new clipart element
            $("#template_tiles").scroll(() => {
                console.log('page is:'+currentPage)
                if (!loading) {
                    //page height
                    currentPage++;
                    let scrollHeight = $("#template_tiles").height();
                    //scroll position
                    let scrollPos = $("#template_tiles").height() + $("#template_tiles").scrollTop();
                    // fire if the scroll position is 300 pixels above the bottom of the page
                    if (((scrollHeight - 10) >= scrollPos) / scrollHeight == 0) {
                        //console.log('bottom!')
                        getNewTemplatesFromTagsAndText(currentPage)
                    }
                }
            });

         //   initTemplates();

        });

        const allowDragToFolder = () => {
            console.log('allowing drag to folders')
            $('.folder_sortable').addClass("folder_sortable_droppable");
            $('.sub-folders').addClass("show");
        }


        const preventDragToFolder = () => {
            console.log('not allowing drag to folders')
            $('.folder_sortable').removeClass("folder_sortable_droppable")
            $('.sub-folders').addClass("show");
        }

        /**
         *Cancel a drag operation and revert
         */
        const revert = () => {
            console.log('reverting')
            drake.cancel(revert)
        }

        // show the boards
        const showBoards = (folderid = null, tags = null) => {
            var myBoard = $("#myBoards").prop("checked");
            var favorite = $("#filter_by_favourite").prop("checked");
            folderid = $('input[name="folder_selection"]:checked').val();
            var sortBy = $("#sort_by").val();
            console.log(sortBy);
            var column = "";
            var dir = "";
            switch (sortBy) {
                case 'name_asc':
                    column = "name";
                    dir = "ASC";
                    break;
                case 'name_desc':
                    column = "name";
                    dir = "DESC";
                    break;
                case 'date_asc':
                    column = "id";
                    dir = "ASC";
                    break;
                case 'date_desc':
                    column = "id";
                    dir = "DESC";
                    break;
                default:
                    column = "name";
                    dir = "ASC";
                    break;
            }
            var searchText = $("#new_template_search_text").val();
            if (tags == null) {
                tags = $("#board_tags :selected").map((_, e) => e.value).get();
            }
            axios({
                url: baseurl + '/board/getBoardsForLab',
                method: 'post',
                data: {
                    id: folderid,
                    lab_id: lab_id,
                    myboard: myBoard,
                    favorite: favorite,
                    column: column,
                    dir: dir,
                    searchText: searchText,
                    tags: tags
                }
            }).then((response) => {
                    if ($("input[name='folder_selection']:checked").val() > 0) {
                        $("#folder_update_dropdown").show();
                    } else {
                        $("#folder_update_dropdown").hide();
                    }
                    $("#selected_folder_label").html($('#folder_radio_label_' + folderid).text())
                    // clean up grid
                    $('.board_grid').packery('remove', $('.grid-item')).packery('shiftLayout');

                    response.data.forEach((item, index) => {
                            let newElement = $('<div class="grid-item board_preview board_container" data-folder="' + item.folder + '" data-id="' + item.id + '" data-timestamp="' + item.created_timestamp + '" style="border: 1px solid gray; min-width: 200px;background-color: white">' +
                                '<div class="col board_section">' +
                                '<div class="d-flex mb-1">' +
                                '<div class="flex-shrink-1">' +
                                '<div class="pretty p-svg p-smooth p-toggle p-plain" data-tippy-content="Pin to top" style="margin-right: initial">' +
                                '<input type="checkbox" class="g_at_el_fav_star" id="favourite_' + item.id + '" onclick="makeFavourite(' + item.id + ')" ' + ((item.favourite && (item.favourite == 1)) ? 'checked' : '') + '>' +
                                '<div class="state p-off">' +
                                '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="svg svg-icon bi bi-star" viewBox="0 0 16 16">' +
                                '<path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.523-3.356c.329-.314.158-.888-.283-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767l-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288l1.847-3.658 1.846 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.564.564 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>' +
                                '</svg>' +
                                '<label></label>' +
                                '</div>' +
                                '<div class="state p-on">' +
                                '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="svg svg-icon bi bi-star-fill g_et_al_fill_accent" viewBox="0 0 16 16">' +
                                '<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>' +
                                '</svg>' +
                                '<label></label></div></div></div>' +
                                '<div class="board_name flex-fill">' +
                                '<a href="' + baseurl + '/board/' + item.id + '" class="g_et_al_listtitle" style="color:black;">' + item.name + '</a>' +
                                '<p>' + item.author + '</p>' +
                                '</div>' +
                                '<div class="flex-fill"><button type="button" data-tippy-content="Info" title="' + item.name + ' "data-description="' + item.description + '" data-id="' + item.id + '" data-lastmodified="' + item.updated_at_str + '" data-dimensions="' + item.width + ' X ' + item.height + '" data-author="' + item.author + '" data-tags="' + item.formattedtags + '" class="btn btn-sm btn-outline-info board_info_btn">' +
                                '<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-info" fill="currentColor" xmlns="http://www.w3.org/2000/svg">' +
                                '<path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z"/>' +
                                '<circle cx="8" cy="4.5" r="1"/>' +
                                '</svg>' +
                                '</button>' +
                                '</div>' +
                                '</div>' +
                                '<div class="board_section_image d-flex justify-content-center">' +
                                '<a href="' + baseurl + '/board/' + item.id + '" class="w-auto  mb-2"><img class="is-loading" src="' + item.thumb + '" style="height: 100px; border: 1px solid lightgrey;  object-fit: contain;"></a>' +
                                '</div>' +
                                '<div class="board_section_footer" style="font-size: x-small">' +
                                '<div>Created:' + item.created_str + '</div>' +
                                '<div>Updated:' + item.updated_str + '</div></div></div></div>');

                            $('.board_grid').append(newElement)
                                // add and lay out newly appended items
                                .packery('appended', newElement);
                        }
                    );
                    $('.board_grid').imagesLoaded()
                        .progress(onProgress)
                        .always(onAlways);
                    // enable popovers

                    $('.board_info_btn').popover({
                        html: true,
                        trigger: 'click',
                        template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',
                        content: infopopovercontent,
                        sanitize: false,
                        title: 'hello'
                    }).on('shown.bs.popover', (e) => {
                        $(".info_details_description").html($(e.currentTarget).data('description'));
                        $(".info_details_author").html($(e.currentTarget).data('author'));
                        $(".info_details_dimensions").html($(e.currentTarget).data('dimensions'));
                        $(".info_details_tags").html($(e.currentTarget).data('tags'));

                        $(".info_details_folder").html($(e.currentTarget).data('folder'));
                        @if(!$lab->read_only)
                        $(".popover-header").append($('<div class="btn-group btn-group-sm float-right mb-2" role="group" aria-label="Actions">\n' +
                            '  <a type="button" tabindex="0" class="btn btn-ghost-info board_preview_btn" ><i class="fas fa-search-plus"></i></a>\n' +
                            '  <a type="button" tabindex="1" class="btn btn-ghost-info board_update_btn" data-toggle="modal" data-id="' + $(e.currentTarget).data('id') + '" data-target="#update_board"><i class="fas fa-pencil-alt"></i></a>\n' +
                            '  <a type="button" tabindex="2" class="btn btn-ghost-info board_copy_btn"><i class="fas fa-copy"></i></a>\n' +
                            '  <a type="button" tabindex="3" class="btn btn-ghost-danger board_delete_btn" onclick="deleteSelectedBoard(' + $(e.currentTarget).data('id') + ')"><i class="fas fa-trash-alt"></i></a>\n' +
                            '</div>'));
                        tippy('.board_preview_btn', {
                            content: 'Preview (TODO)',
                        });
                        tippy('.board_update_btn', {
                            content: 'Update',
                        });
                        tippy('.board_copy_btn', {
                            content: 'Copy (TODO)',
                        });
                        tippy('.board_delete_btn', {
                            content: 'Delete',
                        });
                        @endif
                        //console.log($(e.currentTarget).data('description'))
                        // do something…
                    })

                    var display_filters = "";
                    var selected_folder = $('input[name="folder_selection"]:checked').val();
                    //alert(selected_folder);
                    if (selected_folder != -1) {
                        var folder_name = $("#folder_radio_label_" + selected_folder).text();
                        var name = folder_name.split("(");
                        display_filters += '<div class="form-group-btn-container" ><button class="form-group-btn">' + name[0] + '</button>' +
                            '<div class="btn-overlay"  onclick="removesinglefilter(' + selected_folder + ',' + 2 + ')"><i class="fas fa-times"></i>Clear</div></div>';
                    }
                    var tagsElement = $("#board_tags :selected");

                    tagsElement.map((_, value) => {
                        display_filters += '<div class="form-group-btn-container" ><button class="form-group-btn">' + value.text + '</button>' +
                            '<div class="btn-overlay"  onclick="removesinglefilter(' + value.value + ',' + 1 + ')"><i class="fas fa-times"></i>Clear</div></div>'
                    });
                    $("#display_filters").html(display_filters);
                }
            ).catch(function (error) {
                console.log(error);
                alert('something went wrong with the fetch');
            }).finally(() => {
                // wait(false);
            });
        }
        // $("#myBoards").change(function(){
        //     if($(this).val()==1){
        //         showBoards("",true)
        //     }

        // });
        const makeFavourite = (id) => {
            axios({
                url: baseurl + '/board/' + id + '/favourite',
                method: 'POST',
                data: {
                    favourite: $('#favourite_' + id).is(':checked')
                }
            }).then((response) => {
                if (response.data.status == 0) {
                    $('#favourite_' + id).prop('checked', response.data.value == 1)
                } else {
                    alert('something went wrong with the update');
                }
            }).catch(function (error) {
                console.log(error);
                alert('something went wrong with the update');
            }).finally(() => {
                // wait(false);
            });
        }
        const openeditlabmodal = () => {
            $("#updateLab").modal("show");
        }

        function labsettingshide() {
            var header_type = $("#header_type").val();
            if (header_type == "color") {
                $("#header_type_color").show();
                $("#header_type_image").hide();
            } else {
                $("#header_type_color").hide();
                $("#header_type_image").show();
            }
            var footer_type = $("#footer_type").val();
            if (footer_type == "color") {
                $("#footer_type_color").show();
                $("#footer_type_image").hide();
            } else {
                $("#footer_type_color").hide();
                $("#footer_type_image").show();
            }
            var background_type = $("#background_type").val();
            if (background_type == "color") {
                $("#background_type_color").show();
                $("#background_type_image").hide();
            } else {
                $("#background_type_color").hide();
                $("#background_type_image").show();
            }
        }

        var url = window.location.href;
        url = url.split('?')[0];
        history.pushState(null, '', url);

        //Change Height of footer when window resizes
        $(window).resize(function () {
            if ($(document).height() !== $('body').height()) {
                $('#custom_background_footer_outer').css('height', Math.ceil($(document).height() - $('.custom_background_header').height() - $('.custom_background_main').height()));
                $('#custom_background_footer_outer').show();
                if ($('#custom_background_footer_outer').length)
                    $('#custom_background_footer_inner').hide();
            } else {
                $('#custom_background_footer_inner').show();
                $('#custom_background_footer_outer').hide();
            }
        });

        $(function () {
            //If document height is more than body height then add another footer for full length
            if ($(document).height() !== $('body').height()) {
                $('#custom_background_footer_inner').hide();
                $('body').append('<div class="custom_background_footer" id="custom_background_footer_outer" style="@if($lab->footer_image != '') background-image: url(\'{{asset('storage/'.$lab->footer_image)}}\'); @endif @if($lab->footer_fill_type == 'tile') background-repeat: repeat; background-size: auto; @elseif($lab->footer_fill_type == 'stretch') background-size: 100% 100%; @endif height: ' + Math.ceil($(document).height() - $('.custom_background_header').height() - $('.custom_background_main').height()) + 'px; position: absolute; bottom: 0px; z-index: -1; left: 0px; right: 0px;">' +
                    '<div class="footer-overlay" style="@if($lab->footer_color != '') background-color: {{$lab->footer_color}}; @endif opacity: {{$lab->footer_color == ''?'0':($lab->footer_image != '')?'0.75':'1'}};">' +
                    '</div></div>');

            }
        });

        // update board population
        $('#rename_folder_dialog').on('shown.bs.modal', (el) => {
            $(".popover").popover('hide');
            $("#update_folder_id").val($("input[name='folder_selection']:checked").val())
            $("#update_folder_name").val($('#folder_radio_label_' + $("input[name='folder_selection']:checked").val()).text().trim())
        });

        $('#rename_folder_dialog').submit((event) => {
            console.log('submitting update folder form')
            // cancels the form submission
            event.preventDefault();
            $('#rename_folder_dialog').modal('hide');
            //  var vars = $("#newmediadialog").find("form").serializeArray();
            var vars = $("#rename_folder_dialog").find("form").serialize();
            submitUpdateFolderForm(vars);
        });
        const submitUpdateFolderForm = (vars) => {
            axios({
                url: baseurl + '/board/renamefolder',
                method: 'post',
                data: vars
            }).then((response) => {
                console.log(response.data)
                if (response.data.status == 0) {
                    $("#folder_radio_label_" + response.data.id).text(response.data.label);
                    $("#selected_folder_label").text(response.data.label);
                } else {
                    alert('something went wrong with the operation');
                }
            }).catch(function (error) {
                console.log(error);
                alert('something went wrong with the operation');
            }).finally(() => {
                // re-enable submit button
                $('#folder_update_form :submit').enable()
                // wait(false);
            });

        }

        const roolyDeleteSelectedLabFolder = (id = null) => {
            // console.log('deleting folder');
            //  console.log($("input[name='folder_selection']:checked"). val());
            $('#delete_folder_dialog').modal('hide');
            //wait(true)
            console.log('deleting')
            let folder_id = id ? id : $("input[name='folder_selection']:checked").val();
            axios({
                url: baseurl + '/board/deletefolder',
                method: 'POST',
                data: {
                    id: folder_id
                }
            }).then((response) => {
                // wait(true)
                if (response.data.status == 0) {
                    // remove the folder
                    $("#parent_lable_" + folder_id).remove();
                    //$("#folder_container_-1").prop('checked', true).trigger('change');
                    $('input[name="folder_selection"][value="-1"]').prop('checked', true).trigger('change');
                } else {
                    alert('something went wrong with the operation');
                }
            }).catch(function (error) {
                console.log(error);
                alert('something went wrong with the operation');
            }).finally(() => {
                // wait(false);
            });
        }


        function openDeleteFolderModal(id) {
            $("#delete_folder_dialog").modal('show');
            $('#confirmDelete').attr('onclick', "roolyDeleteSelectedLabFolder(" + id + ")")
        }

    </script>

    <script>
        //Consts
        const defaultCustomImageSrc = "{{asset('img/frontend/backgrounds/bg-cover.png')}}";
        const colorPickerSVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 167.5838 167.5838"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M161.9023,22.8172l-32.9556,41.95L111.2672,87.3485a35.0133,35.0133,0,0,0-9.8794-14.9458,35.1619,35.1619,0,0,0-15.6206-8.5639l19.3177-18.551L144.7188,7.0724c6.3069-6.9871,15.2788-9.1791,20-4.8474S168.2064,15.83,161.9023,22.8172ZM93.7732,80.9193c-9.1423-8.3777-21.9936-9.3172-30.3061-.1017C50.1387,95.605,54.61,111.6046,44.5356,127.0727c0,0,34.0328,4.1446,52.0761-15.7981C104.9216,102.0586,102.9182,89.2976,93.7732,80.9193Zm19.7241,24.0533a32.5318,32.5318,0,0,1-7.5706,14.827c-15.9889,17.6763-40.603,20.3141-53.8562,20.3141a78.73,78.73,0,0,1-9.0429-.45l-20.0107-2.5512,11.0006-16.9993c3.2682-5.02,4.505-10.4852,5.9385-16.8136,2.0641-9.0817,4.62-20.3843,14.1951-31.01A32.0754,32.0754,0,0,1,68.08,63.31l28.32-27.2029,1.3209-1.274h-31.87A65.8519,65.8519,0,0,0,0,100.6854v1.0465a65.8519,65.8519,0,0,0,65.8519,65.8519h0a65.8519,65.8519,0,0,0,65.8519-65.8519V81.7126ZM93.7732,80.9193c-9.1423-8.3777-21.9936-9.3172-30.3061-.1017C50.1387,95.605,54.61,111.6046,44.5356,127.0727c0,0,34.0328,4.1446,52.0761-15.7981C104.9216,102.0586,102.9182,89.2976,93.7732,80.9193Z"/></g></g></svg>';

        //Set Parameters
        const customDataOriginal = {
            icon: {
                image: '{{$lab->icon_path == '' ? '' : asset("storage/".$lab->icon_path)}}',
                color: '{{$lab->color}}',
                darkerColor: '{{$lab->darkerColor}}',
                lighterColor: '{{$lab->lighterColor}}',
            },
            header: {
                image: '{{$lab->header_image == '' ? '' : asset("storage/".$lab->header_image)}}',
                color: '{{$lab->header_color}}',
                fill: '{{$lab->header_fill_type}}'
            },
            background: {
                image: '{{$lab->background_image == '' ? '' : asset("storage/".$lab->background_image)}}',
                color: '{{$lab->background_color}}',
                fill: '{{$lab->background_fill_type}}'
            },
            footer: {
                image: '{{$lab->footer_image == '' ? '' : asset("storage/".$lab->footer_image)}}',
                color: '{{$lab->footer_color}}',
                fill: '{{$lab->footer_fill_type}}'
            },
        };
        let customData = JSON.parse(JSON.stringify(customDataOriginal));

        $(document).ready(() => {
            let $accentColor = "#227722";
            let $lightAccentColor = "#337F33";
            let $darkAccentColor = "#115511";

            //Set On load values
            $('.color_picker_label').each(function (i, v) {
                if ($(v).data('color') !== '') {
                    selectedColor = $(v).data('color');
                    $(v).css('color', isDark(selectedColor) ? '#FFFFFF' : '#000000').css('background-color', selectedColor);
                }
            });
        });


        function changeColors($accentColor, $lightAccentColor, $darkAccentColor) {
            $styles = "/* Accent Color CSS */" +
                ".g_et_al_header1, .g_et_al_header2, .g_et_al_header3, .g_et_al_header4, .g_et_al_header5, .header_image p, .g_et_al_title, .g_et_al_listtitle, .my_board label, .drag_section_selection .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default .select2-selection--multiple" +
                "{" +
                "    color:" + $accentColor + " !important;" +
                "}" +
                ".btn-outline-info, .filter_dropdown .dropdown-menu, .create-btn{" +
                "    color:" + $accentColor + ";" +
                "    border-color:" + $accentColor + ";" +
                "}" +
                ".show > .btn-outline-info.dropdown-toggle" +
                "{" +
                "    color:#000000;" +
                "    background-color:" + $accentColor + ";" +
                "    border-color:" + $accentColor + ";" +
                "}" +
                ".btn-outline-info:hover{" +
                "    background-color:" + $lightAccentColor + ";" +
                "    border-color:" + $accentColor + ";" +
                "}" +
                ".board_preview svg:hover {" +
                "    background-color: " + $lightAccentColor + ";" +
                "}" +
                ".btn-primary{" +
                "    background-color:" + $accentColor + " !important;" +
                "    border-color:" + $accentColor + ";" +
                "}" +
                ".btn-primary:hover, .btn-primary:focus{" +
                "    background-color:" + $darkAccentColor + " !important;" +
                "    border-color:" + $accentColor + ";" +
                "}" +
                ".form-group-btn, .form-group-btn:focus{" +
                "    color:" + $accentColor + ";" +
                "}" +
                ".drag-section [type=radio]:checked + div{" +
                "    border-bottom-color: " + $accentColor + ";" +
                "}" +
                ".drag-section [type=radio]:checked + div .g_et_al_header3, .filter_dropdown .dropdown-menu .g_et_al_header5{" +
                "    color:" + $accentColor + ";" +
                "}" +
                ".form-control:focus{" +
                "    border-color: " + $accentColor + ";" +
                "    box-shadow: 0 0 0 0.2rem " + $accentColor + "40;" +
                "}" +
                ".select2-container--default .select2-selection--multiple input::placeholder, input::placeholder{" +
                "    color: " + $accentColor + " !important;" +
                "}" +
                ".drag_section_selection .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default .select2-selection--multiple, .filter_dropdown.dropdown.float-end.show > button{" +
                "    border-color: " + $accentColor + ";" +
                "}" +
                ".btn-outline-info:focus, .btn-outline-info.focus, .btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-info.dropdown-toggle:focus{" +
                "    box-shadow: 0 0 0 0.2rem " + $accentColor + "80;" +
                "}" +
                ".btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active, .show > .btn-outline-info.dropdown-toggle{" +
                "    background-color:" + $lightAccentColor + ";" +
                "    border-color:" + $accentColor + ";" +
                "}" +
                ".customize_lab_color{" +
                "    background-color:" + $accentColor + ";" +
                "}" +
                ".modal .modal-header .modal-title{" +
                "    color:" + $accentColor + ";" +
                "}" +
                ".modal-content{" +
                "    border: 1px solid " + $accentColor + " !important;" +
                "}" +
                ".g_et_al_color_accent{" +
                "    color:" + $accentColor + " !important;" +
                "}" +
                ".g_et_al_fill_accent{" +
                "    fill:" + $accentColor + " !important;" +
                "}" +
                ".g_et_al_border_1px_accent{" +
                "    border: 1px solid " + $accentColor + ";" +
                "}" +
                ".g_et_al_border_right_1px_accent{" +
                "    border-right: 1px solid " + $accentColor + "" +
                "}";
            $("#styles").html($styles);
        }

        //Open File input when clicked on images

        $(document).on('click', '.image_uploader', function () {
            $(this).next('.image_uploader_file').click();
        });
        $(document).on('click', '.profile_overlay', function () {
            $(this).parent().find('.image_uploader_file').click();
        });
        $('.image_uploader_file').change(function (e) {
            type = $(this).data('type');
            imageUrl = URL.createObjectURL(e.target.files[0]);
            customData[type].image = 'changed';
            $(this).prev('.image_uploader').attr('src', imageUrl);
            $(this).parent().removeClass('no-custom-data');
            switch (type) {
                case 'icon':
                    $('#lab_icon').attr('src', imageUrl);
                    break;
                default:
                    $('#' + type + '_image_remove').val(0);
                    $('.' + type + '-overlay').css("opacity", customData[type].color === '' ? 0 : .75);
                    if (type == 'background') type = 'main';
                    $('.custom_background_' + type).css("background-image", "url(" + imageUrl + ")");
                    break;
            }
        });

        $('.color_picker_label').on('click', function () {
            console.log('pickig colour')
            $(this).next('.color_picker_input').click();
        });

        $('.color_picker_input').change(function (e) {
            selectedColor = $(this).val();

            //Set hidden Input
            $(this).next('.color_picker_input_hidden').val(selectedColor);

            //Set Colors in all places
            type = $(this).data('type');
            labelElement = $(this).prev('.color_picker_label');
            labelElement.css('background-color', selectedColor)
                .css('color', isDark(selectedColor) ? '#FFFFFF' : '#000000')
                .removeClass('no-custom-data')
                .find('.color_picker_label_value').html(selectedColor);
            customData[type].color = selectedColor;
            switch (type) {
                case 'icon':
                    //Change entire css here
                    customData[type].lighterColor = lightenDarkenColor(selectedColor, 20);
                    customData[type].darkerColor = lightenDarkenColor(selectedColor, -20);
                    changeColors(selectedColor, customData[type].lighterColor, customData[type].darkerColor);
                    break;
                /*  case 'header':
                     $('.header_overlay').css("background", selectedColor);
                     break;
                 case 'background':
                     $('.background_overlay').css("background", selectedColor);
                     break;
                 case 'footer':
                     $('.footer_overlay').css("background", selectedColor);
                     break; */
                default:
                    $('.' + type + '-overlay').css("background", selectedColor).css("opacity", customData[type].image == '' ? 1 : .75);
                    break;
            }
        });

        //Remove Colors / Images
        $('.delete_option').click(function (e) {
            e.preventDefault();
            e.stopPropagation();
            let type = $(this).data('type');
            const field = $(this).data('field');
            customData[type][field] = '';
            $(this).parent().addClass('no-custom-data');
            switch (field) {
                case 'image':
                    //reset images
                    $('.' + type + '-overlay').css("opacity", customData[type].color === '' ? 0 : 1);
                    $('#' + type + '_image_remove').val(1);
                    if (type == 'background') type = 'main';
                    $('.custom_background_' + type).css("background-image", "");
                    break;
                case 'color':
                    // set color overlay to 0
                    $('.' + type + '-overlay').css("background", '').css("opacity", 0);
                    $(this).parent().css('background-color', '').css('color', '')
                        .find('.color_picker_label_value').html(colorPickerSVG);
                    $(this).parent().parent().find('.color_picker_input_hidden').val('');
                    break;
                default:
                    break;
            }
        });

        //Change Name
        $('.customize_profile_name').keyup(function () {
            $("#lab_name_p").html($(this).val());
        });

        //Cancel Cutstom
        $('#cancel_lab_customize').click(function () {
            location.reload();
            /* changeColors(customDataOriginal.icon.color,customDataOriginal.icon.lighterColor,customDataOriginal.icon.darkerColor);
            $("#lab_name_p").html(customDataOriginal.name);
            $(".customize_profile_name").val(customDataOriginal.name); */
        });

        $('.custom_background_fill_type').change(function (e) {
            backgroundRepeat = 'no-repeat';
            backgroundSize = 'cover';
            switch ($(this).val()) {
                case 'stretch':
                    backgroundRepeat = 'no-repeat';
                    backgroundSize = '100% 100%';
                    break;
                case 'tile':
                    backgroundRepeat = 'repeat';
                    backgroundSize = 'auto';
                    break;
            }
            switch ($(this).data('type')) {
                case 'header':
                    $('.custom_background_header')
                        .css("background-repeat", backgroundRepeat)
                        .css("background-size", backgroundSize);
                    break;
                case 'background':
                    $('.custom_background_main')
                        .css("background-repeat", backgroundRepeat)
                        .css("background-size", backgroundSize)
                        .css("background-color", "#FFFFFF");
                    break;
                case 'footer':
                    $('.custom_background_footer')
                        .css("background-repeat", backgroundRepeat)
                        .css("background-size", backgroundSize);
                    break;
            }
        });


        //Lab Folders
        const makeNewLabBoardFolder = (lab_id, folder_id) => {

            if (!$('#new_folder_name_' + folder_id).val() || $('#new_folder_name_' + folder_id).val() == null) {
                alert("Please give the folder name");
                return false;
            }
            axios({
                url: baseurl + '/board/newlabfolder',
                method: 'POST',
                data: {
                    label: $('#new_folder_name_' + folder_id).val(),
                    lab_id: lab_id,
                    folder_id: folder_id
                }
            }).then(response => {
                console.log(response);
                if (response.data) {
                    var data = response.data;
                    $("#parent_lable_" + folder_id).attr("data-toggle", "collapse");
                    $("#parent_lable_" + folder_id).attr("aria-expanded", "false");
                    $("#parent_lable_" + folder_id).attr("data-target", "#folder-" + data['id']);
                    $("#parent_lable_" + folder_id).addClass("collapse-folder");

                    var html = '<label class="container folder_sortable p-0" style="border: none;border-bottom: 1px solid;" id="parent_lable_' + data['id'] + '">' +
                        '<input type="radio" name="folder_selection" value="' + data['id'] + '" onchange="showBoards(' + data['id'] + ')" >' +
                        '<div class="d-flex flex-row board-folder">' +
                        '<div class="folder-status-img" style="color: blue;"><svg class="g_et_al_fill_accent" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150.94 126.07"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M148.05,26.25a10.66,10.66,0,0,0-8-3.55h-4.3c-.84-4.6-4.35-8.09-8.52-8.09H52.12V10.16C52.12,4.56,48.23,0,43.44,0H8.68C3.93,0,0,4.56,0,10.16V112.69a11.41,11.41,0,0,0,1.45,5.61,10.6,10.6,0,0,0,8.62,7.62,10.31,10.31,0,0,0,1.77.15H130.36c6.34,0,12-5.35,12.66-11.92l7.85-78.91A11.6,11.6,0,0,0,148.05,26.25Zm-3.3,8.36-7.85,78.93c-.34,3.46-3.34,6.38-6.54,6.38H11.84a4.77,4.77,0,0,1-.78-.07c-2.54-.38-4.23-2.82-3.92-5.7l7.73-78,.09-.94c.36-3.47,3.36-6.4,6.55-6.4H140a4.61,4.61,0,0,1,3.46,1.51A5.41,5.41,0,0,1,144.75,34.61Z"></path></g></g></svg></div>' +
                        '<div class="g_et_al_header3" id="folder_radio_label_' + data['id'] + '">' + data['label'] + '(0)' +
                        '</div>' +
                        '<div class="dropdown filter_dropdown newfolder">' +
                        '<button class="create-btn dropdown-toggle" type="button" data-toggle="dropdown" style="height:22px;float:right;">' +
                        '<i class="fa fa-plus" aria-hidden="true"></i></button>' +
                        '<div class="dropdown-menu" style="z-index:1;">' +
                        '<h5 class="g_et_al_header5">New Folder</h5>' +
                        '<div class="form-group">' +
                        '<input type="text" class="form-control" id="new_folder_name_' + data['id'] + '" placeholder="Folder name">' +
                        '</div>' +
                        '<div class="form-group create_btn">' +
                        '<button type="button" class="btn btn-primary" onclick="makeNewLabBoardFolder(' + lab_id + ',' + data['id'] + ')">Create</button>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '<div class="folder-actions flex-grow-1 pr-1">' +

                        '</div>' +
                        '<div class="float-right folder-div-after" id="arraw_icon_' + data['id'] + '" style="display:none" ></div>' +
                        '</div>' +
                        '</label>' +
                        '<div class="folder_collapse panel-collapse sub-folders collapse" id="folder-' + data['id'] + '" style="display:none">' +
                        '</div>';

                    //$(html).insertAfter("#parent_lable_"+folder_id);
                    $("#folder-" + folder_id).append(html);
                    $("#arraw_icon_" + folder_id).show();
                    $("#folder-" + folder_id).show();
                    $('#new_folder_name_' + folder_id).val("");
                }
            }).catch(err => {
                console.log(err);
                alert("Something went wrong");
            })
        }

        // Tags filter
        $("#board_tags").change(function () {
            //alert(1234);
            var selectedValues = $("#board_tags :selected").map((_, e) => e.value).get();
            showBoards(null, selectedValues);
        })
        const clearall = () => {
            $("#filter_by_favourite").prop("checked", false);
            $("#new_template_search_text").val("");
            $("#board_tags").val("").trigger("change");
            showBoards();
        }

        function removesinglefilter(id, type) {
            if (type == 1) {
                $("#board_tags option[value='" + id + "']").prop("selected", false).trigger("change");
            } else {
                $("input[name=folder_selection][value='" + -1 + "']").prop('checked', true).trigger('change');
                //showBoards();
            }
        }

        //Color Lighen
        function lightenDarkenColor(col, amt) {
            var usePound = false;
            if (col[0] == "#") {
                col = col.slice(1);
                usePound = true;
            }
            var num = parseInt(col, 16);
            var r = (num >> 16) + amt;
            if (r > 255) r = 255;
            else if (r < 0) r = 0;
            var b = ((num >> 8) & 0x00FF) + amt;
            if (b > 255) b = 255;
            else if (b < 0) b = 0;
            var g = (num & 0x0000FF) + amt;
            if (g > 255) g = 255;
            else if (g < 0) g = 0;
            return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16);
        }

        //Color
        function isDark(c) {
            var c = c.substring(1);      // strip #
            var rgb = parseInt(c, 16);   // convert rrggbb to decimal
            var r = (rgb >> 16) & 0xff;  // extract red
            var g = (rgb >> 8) & 0xff;  // extract green
            var b = (rgb >> 0) & 0xff;  // extract blue
            var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
            return (luma < 100)
        }
    </script>
@endpush
@section('forum_link')
    <li class="nav-item ml-auto"><a href="{{ route('frontend.lab.forum', $lab->id) }}"
                                    class="nav-link g_et_al_navigation ">Lab Forum</a>
    </li>
@endsection

@section('content')
    {{-- @if($lab)
        {!! Breadcrumbs::render('frontend.lab.index', $lab) !!}
    @endif --}}
        <div class="custom_background">
        <div class="custom_background_header"
             style='@if($lab->header_image != '') background-image: url("{{asset('storage/'.$lab->header_image)}}"); @endif @if($lab->header_fill_type == 'tile')background-repeat: repeat;background-size: auto; @elseif($lab->header_fill_type == 'stretch')background-size: 100% 100%; @endif'>
            <div class="header-overlay"
                 style="@if($lab->header_color != '') background-color: {{$lab->header_color}}; @endif opacity: {{$lab->header_color == ''?'0':($lab->header_image != '')?'0.75':'1'}};"></div>
        </div>
        <div class="custom_background_main"
             style='@if($lab->background_image != '') background: url("{{asset('storage/'.$lab->background_image)}}"); @endif @if($lab->background_fill_type == 'tile') background-repeat: repeat; background-size: auto; @elseif($lab->background_fill_type == 'stretch') background-size: 100% 100%; @endif'>
            <div class="background-overlay"
                 style="@if($lab->background_color != '') background-color: {{$lab->background_color}}; @endif opacity: {{$lab->background_color == ''?'0':($lab->background_image != '')?'0.75':'1'}};"></div>
        </div>
        <div class="custom_background_footer"
             style='@if($lab->footer_image != '') background: url("{{asset('storage/'.$lab->footer_image)}}"); @endif @if($lab->footer_fill_type == 'tile') background-repeat: repeat; background-size: auto; @elseif($lab->footer_fill_type == 'stretch') background-size: 100% 100%; @endif'>
            <div class="footer-overlay"
                 style="@if($lab->footer_color != '') background-color: {{$lab->footer_color}}; @endif opacity: {{$lab->footer_color == ''?'0':($lab->footer_image != '')?'0.75':'1'}};"></div>
        </div>
    </div>
    <div class="header_section d-flex align-items-end" style="margin-bottom:10px">
        <div class="profile_container" style="width:50%">
            <div class="profile_section">
                {{--        Profile picture--}}
                <div class="profile_image" style="">
                    <a href="#" data-toggle="modal" data-target="#customizeLab" data-backdrop="false">

                        @if($lab->icon_path)
                            <img src="{{ asset('storage/'.$lab->icon_path) }}" class="g_et_al_border_1px_accent"
                                 id="lab_icon"
                                 style="background-color: rgb(255, 255, 255); border-radius: 10px 0px 10px 10px;"
                                 alt="Our Business Is Life Itself">
                    </a>
                    @else
                        <img class="g_et_al_border_1px_accent"
                             id="lab_icon"
                             style="background-color: rgb(255, 255, 255); border-radius: 10px 0px 10px 10px;"
                             src="{{ asset('img/frontend/placeholders/lab_icon_default.svg') }}"
                             style="" alt="we love doing science!">
                    @endif
                </div>
                {{--        User info--}}
                <div class="user-name">
                    <a href="{{route('frontend.lab.index',['id'=>$lab->id])}}">
                        <p class="g_et_al_header2"
                           id="lab_name_p">{{ $lab->name }}{{($lab->read_only?' (read only)':'')}}</p>
                    </a>
                    <ul class="list-group list-group-horizontal">
                        @foreach($lab->members->take(3) as $member)

                            <li class="list-group-item"
                                style="border:none;color:black; background-color: transparent;padding: 5px 5px;">
                                <i class="fas fa-star g_et_al_color_accent"></i> {{$member->name}}
                            </li>
                        @endforeach

                    </ul>

                </div>
            </div>
        </div>
        <div class="nav-container desktop-nav-container w-50">
            @include('frontend.includes.nav_minimal')
            {{--        Members icons--}}
            @foreach($lab->members->take(3) as $member)
                @if($member->id == $logged_in_user->id)
                    <a href="{{route('frontend.index')}}">
                        @endif

                        <div class="header_image" data-tippy-content="{{ $member->name }}"
                             style="">
                            <img class="g_et_al_border_1px_accent" src="{{ $member->getPicture(80) }}"
                                 style="background-color: rgb(255, 255, 255);border-radius: 0px 10px 10px;"
                                 alt="{{ $member->name }}">

                        </div>
                        @if($member->id == $logged_in_user->id)
                    </a>
                @endif
            @endforeach
            <p class="g_et_al_color_accent" style="margin:0px;">{{count($lab->members)}} members</p>
        </div>

    </div>
    <div class="list_sections row" style="margin-top: 10px; min-height: 200px">
        {{--        News feed--}}
        <div class="col g_et_al_border_1px_accent"
             style=" background-color: #ffffff; border-radius: 0px 10px 10px 10px;">
            <div class="news_feed_heading"><a class="g_et_al_header3" href="{{route('frontend.lab.forum', $lab->id)}}">
                    Lab Feed</a>
            </div>
            {{--            News feed items--}}
            @if($notifications->count()==0)
                You're all caught up!
            @endif
            <table class="table table-hover feed_table">
                @foreach($notifications as $thread)
                    <tr>
                        <td>
                            <div class="feed_list d-flex align-text-top mt-auto mb-auto">
                                <div class="w-25 mt-auto mb-auto">
                                    <p class="g_et_al_timecell feed_time"> {{$thread->created_at}}</p>
                                </div>
                                <div class="flex-grow-1 mt-auto mb-auto">
                                    <div class="d-flex mt-auto mb-auto">
                                        <div class="flex-grow-1 mt-auto mb-auto">
                                            <a class="g_et_al_listtitle feed_title"
                                               href="{{ $thread->path() }}">{{substr($thread->title,0,30)}}</a>
                                        </div>
                                        <div class="justify-content-end mt-auto mb-auto mr-2">
                                            <a href="{{$thread->path()}}#replies"><i
                                                    class="far fa-comment text-primary"></i><span
                                                    class="text-muted"> {{$thread->replies->count()}}</span></a>
                                        </div>
                                    </div>

                                </div>
                                <div class="mt-auto mb-auto">
                                    <div class="row">

                                        <div class="col g_et_al_paragraph2 lab_name_section mt-auto mb-auto">

                                            <svg class="g_et_al_fill_accent" xmlns="http://www.w3.org/2000/svg"
                                                 viewBox="0 0 124.46 148.5">
                                                <g id="Layer_2" data-name="Layer 2">
                                                    <g id="Layer_1-2" data-name="Layer 1">
                                                        <path
                                                            d="M2.12,140.67a15.49,15.49,0,0,0,13.55,7.83h93.12A15.65,15.65,0,0,0,122.33,125L75.79,44.4c-.24-.38-.47-.74-.73-1.1L75,43.17v-31l.27-.14A6.38,6.38,0,0,0,72.3,0H52.16a6.38,6.38,0,0,0-6.38,6.38,6.19,6.19,0,0,0,1.88,4.5A6.15,6.15,0,0,0,49.22,12l.27.14v31l-.09.13c-.27.37-.5.74-.74,1.11L2.13,125A15.46,15.46,0,0,0,2.12,140.67ZM45.28,70.08h33.9a4.37,4.37,0,0,1,0,8.74H45.28a4.37,4.37,0,0,1,0-8.74Zm0,15.43H61.17a4.37,4.37,0,0,1,0,8.73H45.28a4.37,4.37,0,0,1,0-8.73Zm0,15.42h33.9a4.37,4.37,0,0,1,0,8.73H45.28a4.37,4.37,0,0,1,0-8.73Zm0,15.43H61.17a4.37,4.37,0,0,1,0,8.73H45.28a4.37,4.37,0,0,1,0-8.73Zm0,15.42h33.9a4.37,4.37,0,0,1,0,8.73H45.28a4.37,4.37,0,0,1,0-8.73Z"/>
                                                    </g>
                                                </g>
                                            </svg>
                                            <span>{{$thread->user['first_name']." ".$thread->user['last_name']}}</span>


                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>

                    </tr>

                @endforeach
                @if($notifications->count()>4)
                    <tr>
                        <td><a href="{{route('frontend.messages')}}">{{$notification_count}} more...</a></td>
                    </tr>
                @endif

            </table>

        </div>
        {{--        Lab notifications--}}
        @if($logged_in_user->is_in_lab)

            <div class="col g_et_al_border_1px_accent"
                 style="background-color: #ffffff; border-radius: 0px 10px 10px 10px;">
                <div class="notification_heading g_et_al_header3"><a class="g_et_al_header3"
                                                                     href="{{"{$lab->id}/forum#channel_{$lab->announcementForumId}"}}">
                        Announcements</a>
                </div>
                @if($announcements->count()==0)
                    You're all caught up!
                @endif
                <table class="table table-hover feed_table">
                    @foreach($announcements as $thread)
                        <tr>
                            <td>
                                <div class="feed_list d-flex align-text-top mt-auto mb-auto">
                                    <div class="w-25 mt-auto mb-auto">
                                        <p class="g_et_al_timecell feed_time"> {{$thread->created_at}}</p>
                                    </div>
                                    <div class="flex-grow-1 mt-auto mb-auto">
                                        <div class="d-flex mt-auto mb-auto">
                                            <div class="flex-grow-1 mt-auto mb-auto">
                                                <a class="g_et_al_listtitle feed_title"
                                                   href="{{ $thread->path() }}">{{substr($thread->title,0,30)}}</a>
                                            </div>
                                            <div class="justify-content-end mt-auto mb-auto mr-2">
                                                <a href="{{$thread->path()}}#replies"><i
                                                        class="far fa-comment text-primary"></i><span
                                                        class="text-muted"> {{$thread->replies->count()}}</span></a>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="mt-auto mb-auto">
                                        <div class="row">

                                            <div class="col g_et_al_paragraph2 lab_name_section mt-auto mb-auto">

                                                <svg class="g_et_al_fill_accent" xmlns="http://www.w3.org/2000/svg"
                                                     viewBox="0 0 124.46 148.5">
                                                    <g id="Layer_2" data-name="Layer 2">
                                                        <g id="Layer_1-2" data-name="Layer 1">
                                                            <path
                                                                d="M2.12,140.67a15.49,15.49,0,0,0,13.55,7.83h93.12A15.65,15.65,0,0,0,122.33,125L75.79,44.4c-.24-.38-.47-.74-.73-1.1L75,43.17v-31l.27-.14A6.38,6.38,0,0,0,72.3,0H52.16a6.38,6.38,0,0,0-6.38,6.38,6.19,6.19,0,0,0,1.88,4.5A6.15,6.15,0,0,0,49.22,12l.27.14v31l-.09.13c-.27.37-.5.74-.74,1.11L2.13,125A15.46,15.46,0,0,0,2.12,140.67ZM45.28,70.08h33.9a4.37,4.37,0,0,1,0,8.74H45.28a4.37,4.37,0,0,1,0-8.74Zm0,15.43H61.17a4.37,4.37,0,0,1,0,8.73H45.28a4.37,4.37,0,0,1,0-8.73Zm0,15.42h33.9a4.37,4.37,0,0,1,0,8.73H45.28a4.37,4.37,0,0,1,0-8.73Zm0,15.43H61.17a4.37,4.37,0,0,1,0,8.73H45.28a4.37,4.37,0,0,1,0-8.73Zm0,15.42h33.9a4.37,4.37,0,0,1,0,8.73H45.28a4.37,4.37,0,0,1,0-8.73Z"/>
                                                        </g>
                                                    </g>
                                                </svg>
                                                <span>{{$thread->user['first_name']." ".$thread->user['last_name']}}</span>


                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>

                        </tr>
                    @endforeach
                </table>
            </div>
        @endif
    </div>
    <div class="row dashboard_container" style="margin-top: 20px; min-height: 500px">

        <div class="col dashboard_section g_et_al_border_1px_accent"
             style=" background-color: #ffffff; border-radius: 0px 10px 10px 10px;">
            {{--            <div class="g_et_al_header2" style="border-bottom: 2px solid grey">Board explorer--}}
            {{--            </div>--}}


            <div class="row drag-section" id="drag_container">
                {{--                Artboard folders and filters section--}}

                <div class="col-sm-3 grid drag_section_selection g_et_al_border_right_1px_accent">

                    {{--                    Filters--}}
                    <div class="panel panel-default mb-1">
                        <div class="panel-heading ">
                            <div class="clearfix">
                                <div class="panel-title g_et_al_header3 float-left filter_title">
                                    <svg class="g_et_al_fill_accent" xmlns="http://www.w3.org/2000/svg"
                                         viewBox="0 0 142.96 149.62">
                                        <g id="Layer_2" data-name="Layer 2">
                                            <g id="Layer_1-2" data-name="Layer 1">
                                                <path
                                                    d="M136.61,0H6.34a6.31,6.31,0,0,0-5,10.12A149.65,149.65,0,0,1,10.9,24.25l47.33,81.83v30.55a6.88,6.88,0,0,0-1.69,1.24,6.77,6.77,0,0,0-2,4.86,6.91,6.91,0,0,0,6.89,6.89H81.56a6.88,6.88,0,0,0,3.16-13V106.08l47.34-81.83a149.65,149.65,0,0,1,9.61-14.13A6.32,6.32,0,0,0,136.61,0Z"/>
                                            </g>
                                        </g>
                                    </svg>
                                    Filter
                                </div>
                                <div class="float-right folder-div-after pt-1" data-toggle="collapse"
                                     data-target="#collapseFilter"></div>
                                <button class="clear_all_btn" onclick="clearall()"><i class="fas fa-times"></i>Clear All
                                </button>
                            </div>
                        </div>
                        <div id="collapseFilter" class="panel-collapse collapse" style="border-bottom: 1px solid gray">
                            <div class="panel-body">
                                <div class="form-row mb-1">
                                    {{--                        Artboard search by text @TODO get artboards dymanically when updated--}}
                                    <div class="form-group my_board g_et_al_color_accent">
                                        <label>
                                            <input type="checkbox" style="width:0;height:0" id="myBoards" value="1"
                                                   onchange="showBoards()">
                                            <i class="fa fa-stop g_et_al_color_accent" aria-hidden="true"></i> My Boards</label>
                                    </div>
                                    <div class="form-group has-search">
                                        <span class="fa fa-search form-control-feedback g_et_al_color_accent"></span>
                                        <input type="text" id="new_template_search_text"
                                               class="input_field form-control"
                                               placeholder="Search" onkeyup="showBoards()">
                                    </div>
                                </div>
                                <div class="form-row mb-1">
                                    {{--                        Artboard search by tag @TODO get artboards dymanically when updated--}}
                                    <div class="col">
                                        {{ html()->multiselect('tags[]',$tags->pluck('text', 'id'))->class('tagsselect')->id('board_tags')
                                                       }}
                                    </div>
                                </div>
                                <div class="form-row mb-1">
                                    {{--                        Artboard search by favourite @TODO get artboards dymanically when updated--}}
                                    <div class="col">
                                        <div class="pretty p-switch p-smooth p-toggle p-plain"
                                             data-tippy-content="Show only favourites">
                                            <input type="checkbox" id="filter_by_favourite" value="1"
                                                   onchange="showBoards()">
                                            <div class="state ">
                                                <label>Show only favourites</label>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{--                    Folders--}}
                    <div class="panel panel-default mb-1">
                        <div class="panel-heading ">
                            <div class="panel-title ">
                                <div class="clearfix">
                                    @if(!$lab->read_only)
                                        <span class="filter_dropdown dropdown float-end">
                                        <button class="folder-btn"
                                                data-toggle="dropdown"
                                                aria-haspopup="true"
                                                aria-expanded="false"><svg class="g_et_al_fill_accent"
                                                                           xmlns="http://www.w3.org/2000/svg"
                                                                           viewBox="0 0 180.38 126.07"><g id="Layer_2"
                                                                                                          data-name="Layer 2"><g
                                                        id="Layer_1-2" data-name="Layer 1"><path
                                                            d="M180.32,35.25l-7.85,78.9c-.65,6.57-6.33,11.92-12.67,11.92H69.68A12.72,12.72,0,0,0,71.47,123a12.17,12.17,0,0,0,.8-3.07H159.8c3.21,0,6.21-2.93,6.55-6.38l7.85-78.93a5.41,5.41,0,0,0-1.27-4.25,4.59,4.59,0,0,0-3.46-1.52H72.27a12.17,12.17,0,0,0-.8-3.07,12.72,12.72,0,0,0-1.79-3.07,12.54,12.54,0,0,0-9.87-4.79H38a12.55,12.55,0,0,0-8.59,3.39V10.16C29.45,4.56,33.37,0,38.13,0H72.89c4.79,0,8.68,4.56,8.68,10.16v4.45h75.07c4.18,0,7.7,3.5,8.53,8.1h4.3a10.64,10.64,0,0,1,8,3.54A11.61,11.61,0,0,1,180.32,35.25Zm-82.48,50V63.5a5,5,0,0,0-5-5h-28v-28a5,5,0,0,0-3.3-4.72,5,5,0,0,0-1.73-.31H38a5,5,0,0,0-5,5v28H5a5,5,0,0,0-5,5V85.27a5,5,0,0,0,5,5H33v28a5,5,0,0,0,1.74,3.79s0,0,0,0A5,5,0,0,0,38,123.31H59.81a5,5,0,0,0,1.73-.31,5,5,0,0,0,3.3-4.72v-28h28A5,5,0,0,0,97.84,85.27Z"/></g></g></svg>
                                        </button>

                                        <div class="dropdown-menu">
                                        <h5 class="g_et_al_header5">New Folder</h5>
                                            <div class="form-group">
                                                <input type="text" class="form-control" id="new_folder_name"
                                                       placeholder="Folder name" required>
                                            </div>
                                            <div class="form-group create_btn">
                                                <button type="button" class="btn btn-primary"
                                                        onclick="makeNewBoardFolder()">Create
                                                </button>
                                            </div>
                                        </div>

                                    </span>
                                    @endif
                                    <span class="float-start g_et_al_header3"> Folders</span>

                                    <div class="float-right folder-div-after" data-toggle="collapse"
                                         aria-expanded="true"
                                         data-target="#collapseFolders"></div>
                                </div>
                            </div>
                        </div>
                                                <div id="collapseFolders" class="folder_collapse panel-collapse show" style="">
                            <label class="container mt-2 p-0 nodrag"><input type="radio" name="folder_selection"
                                                                            value="-1" checked onchange="showBoards()">
                                <div class="d-flex flex-row board-folder"
                                     style=" cursor:pointer;" onclick="showBoards()">
                                    <div class="g_et_al_header3" id="folder_radio_label_-1">Show all</div>
                                </div>
                            </label>
                            <div class="panel-body folder-lists nested" id="folder_list">
                                @if(count($folders)>0)
                                    @include('frontend.lab.includes.subfolder',['folders'=>$folders,"lab_id"=>$lab->id])
                                @endif
                            </div>
                        </div>

                    </div>

                </div>
                <div class="col-sm-9 drag_section_display">
                    <div class="d-flex bd-highlight drag_display_heading" style="">


                        <div class="flex-grow-1">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="sort_by" class="sr-only">Sort by</label>
                                    <select id="sort_by" class="form-control" onchange="showBoards()" style="">
                                        <option value="name_asc">Name (A-Z)</option>
                                        <option value="name_desc">Name (Z-A)</option>
                                        <option value="date_desc">Newest first</option>
                                        <option value="date_asc">Oldest first</option>
                                    </select>
                                </div>
                                <div id="display_filters" class="display-filters-section">
                                    <div class="form-group-btn-container">
                                        <button class="form-group-btn" onclick="removesinglefilter()">Folder Name
                                        </button>
                                        <div class="btn-overlay"><i class="fas fa-times"></i>Clear</div>
                                    </div>
                                </div>

                            </form>
                        </div>


                        <div class="board_new_section">
                            @if(!$lab->read_only)
                                <div class="dropdown">
                                    <button class="board_new g_et_al_fill_accent" data-toggle="dropdown"
                                            aria-haspopup="true"
                                            aria-expanded="false">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 199.87 153.96">
                                            <g id="Layer_2" data-name="Layer 2">
                                                <g id="Layer_1-2" data-name="Layer 1">
                                                    <path
                                                        d="M162.26,105.39A12.41,12.41,0,0,0,165,105v36A12.94,12.94,0,0,1,152.08,154H12.93A12.94,12.94,0,0,1,0,141V31.91A12.94,12.94,0,0,1,12.93,19H127.48v5.49H12.93A7.43,7.43,0,0,0,5.5,31.91V141a7.43,7.43,0,0,0,7.43,7.43H152.08a7.43,7.43,0,0,0,7.43-7.43V105.4h2.75Zm-55.2-33A12.61,12.61,0,0,1,94.47,59.81V42.11H24.41v88.72h115V105.38a12.58,12.58,0,0,1-12-12.57V72.4ZM194.83,33h-28V5a5,5,0,0,0-5-5H140.06a5,5,0,0,0-5,5V33h-28a5,5,0,0,0-5,5V59.81a5,5,0,0,0,5,5h28v28a5,5,0,0,0,4.42,5,4.08,4.08,0,0,0,.61,0h21.77a3,3,0,0,0,.43,0A4.85,4.85,0,0,0,165,96.71a5,5,0,0,0,1.87-3.9v-28h28a5,5,0,0,0,5-5V38A5,5,0,0,0,194.83,33Z"/>
                                                </g>
                                            </g>
                                        </svg>
                                    </button>
                                    <div class="dropdown-menu board-new-dropdown">
                                        <a class="dropdown-item" data-toggle="modal" data-target="#new_board" href="#">Blank
                                            board</a>
                                        <a class="dropdown-item" data-toggle="modal"
                                           data-target="#new_board_from_template"
                                           href="#">From template</a>
                                    </div>
                                </div>
                            @endif
                        </div>
                        <div class=" p-2 ">
                            {{--<span class="g_et_al_header2"> Board explorer</span>--}}
                            @cannot('no ads')
                                <span
                                    class="g_et_al_navigation">{{5-$logged_in_user->boards->count()}} of 5 free boards remaining.  <a
                                        href="{{route('frontend.user.changeplan')}}"
                                        class="btn btn-sm btn-outline-warning">
                            Go pro for more!
                        </a></span>
                            @endcannot

                        </div>

                        {{--            <button class="btn">New</button>--}}
                    </div>
                    <div class="row g_et_al_header2 w-100" style="margin-left:2px">
                        <div id="selected_folder_label" class="selected-label"></div>
                        <div class="dropdown" id="folder_update_dropdown">
                            <button class="board_new" data-toggle="dropdown"
                                    data-tippy-content="Rename/delete"
                                    aria-haspopup="true"
                                    aria-expanded="false">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="darkgrey"
                                     class="bi bi-caret-down-fill" viewBox="0 0 16 16" d>
                                    <path
                                        d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
                                </svg>
                            </button>
                            <div class="dropdown-menu board-new-dropdown">
                                <a class="dropdown-item" data-toggle="modal" data-target="#rename_folder_dialog"
                                   href="#">Rename folder

                                    <svg xmlns="http://www.w3.org/2000/svg" fill="darkgrey" width="16" height="16">
                                        <defs/>
                                        <g data-name="Layer 2">
                                            <path
                                                d="M0 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2H2a2 2 0 00-2 2zm5 11a16 16 0 01-2 0 16 16 0 011-2 9 9 0 010-1l3 2a9 9 0 01-2 1zm7-8l-5 6-2-2 5-6a1 1 0 012 0v1a1 1 0 010 1z"
                                                data-name="Layer 1"/>
                                        </g>
                                    </svg>

                                </a>
                                @if ($logged_in_user->my_lab && ($logged_in_user->my_lab->id==$lab->id))
                                    <a class="dropdown-item" data-toggle="modal"
                                       data-target="#delete_folder_dialog"
                                       href="#">Remove folder
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="darkgrey"
                                             class="bi bi-trash-fill" viewBox="0 0 16 16">
                                            <path
                                                d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
                                        </svg>
                                    </a>
                                @endif

                            </div>
                        </div>
                    </div>
                    <div class="row w-100 board_grid nested" id="board_list" style="margin-left:2px">


                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('dialogs')
    @can('create board')
        <div id="new_board" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">New board</h4>
                        <button type="button" class="close modal-close-btn" data-dismiss="modal">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129.94 129.94">
                                <g id="Layer_2" data-name="Layer 2">
                                    <g id="Layer_1-2" data-name="Layer 1">
                                        <path
                                            d="M112.06,0H0V112.06a17.88,17.88,0,0,0,17.88,17.88h94.18a17.87,17.87,0,0,0,17.88-17.88V17.88A17.88,17.88,0,0,0,112.06,0Zm12.88,112.06a12.9,12.9,0,0,1-12.88,12.88H17.88A12.9,12.9,0,0,1,5,112.06V5H112.06a12.9,12.9,0,0,1,12.88,12.88ZM102,40,77,65l25,25a8.5,8.5,0,1,1-12,12L65,77,40,102a8.5,8.5,0,1,1-12-12L53,65l-25-25a8.5,8.5,0,1,1,12-12L65,53l25-25a8.5,8.5,0,1,1,12,12Z"></path>
                                    </g>
                                </g>
                            </svg>
                        </button>
                    </div>
                    <div class="modal-body">
                        @include('frontend.lab.form.newboard')
                    </div>
                </div>
            </div>
        </div>

        <div id="update_board" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Update board</h4>
                        <button type="button" class="close modal-close-btn" data-dismiss="modal">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129.94 129.94">
                                <g id="Layer_2" data-name="Layer 2">
                                    <g id="Layer_1-2" data-name="Layer 1">
                                        <path
                                            d="M112.06,0H0V112.06a17.88,17.88,0,0,0,17.88,17.88h94.18a17.87,17.87,0,0,0,17.88-17.88V17.88A17.88,17.88,0,0,0,112.06,0Zm12.88,112.06a12.9,12.9,0,0,1-12.88,12.88H17.88A12.9,12.9,0,0,1,5,112.06V5H112.06a12.9,12.9,0,0,1,12.88,12.88ZM102,40,77,65l25,25a8.5,8.5,0,1,1-12,12L65,77,40,102a8.5,8.5,0,1,1-12-12L53,65l-25-25a8.5,8.5,0,1,1,12-12L65,53l25-25a8.5,8.5,0,1,1,12,12Z"></path>
                                    </g>
                                </g>
                            </svg>
                        </button>
                    </div>
                    <div class="modal-body">
                        @include('frontend.user.form.updateboard')
                    </div>
                </div>
            </div>
        </div>

        <div id="new_board_from_template" class="modal fade" role="dialog">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">New from template <span id="selected_template_name"></span></h4>
                        <button type="button" class="close" data-dismiss="modal"><i class="fa fa-times"
                                                                                    aria-hidden="true"
                                                                                    style="color: red"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        @include('frontend.user.form.newboardfromtemplate')
                    </div>
                </div>
            </div>
        </div>

        <div id="deletedialog" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Really delete?</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            {{--<button type="submit" class="btn btn-primary">Submit</button>--}}
                            <div style="margin: 0 auto; text-align: center; ">
                                <button class="btn btn-lg btn-danger" onclick="roolyDeleteSelectedLabFolder()"><i
                                        class="fas fa-trash" aria-hidden="true"></i> Delete
                                </button>

                                <button class="btn btn-secondary btn-lg" data-dismiss="modal"><i class="fas fa-undo"
                                                                                                 aria-hidden="true"></i>
                                    Cancel
                                </button>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endcan
    
    @if ($logged_in_user->my_lab)


        <div class="modal customize_lab_modal fade" id="customizeLab" tabindex="-1" role="dialog"
             aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Customize Lab</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    {{ html()->modelForm($logged_in_user->my_lab, 'POST', route('frontend.lab.update',['id'=>$logged_in_user->my_lab->id]))->attribute('enctype', 'multipart/form-data')->open() }}
                    <div class="modal-body">
                        <div class="customize_lab_profile">
                            <div class="customize_lab_profile_image g_et_al_border_1px_accent">
                                @if($lab->icon_path)
                                    <img src="{{asset('storage/'.$lab->icon_path)}}" id="lab_icon_image"
                                         class="image_uploader"
                                         alt="">
                                @else
                                    <img src=" https://graphicsetal.dynalias.org/img/frontend/backgrounds/bg-cover.png"
                                         id="lab_icon_image"
                                         class="image_uploader"
                                         alt="">
                                @endif
                                <input type="file" name="icon_path" style="display: none;" class="image_uploader_file"
                                       data-type="icon"/>
                                <div class="profile_overlay">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.671 96.671">
                                        <g id="Layer_2" data-name="Layer 2">
                                            <g id="Layer_1-2" data-name="Layer 1">
                                                <path
                                                    d="M0,12.3355v72A12.3355,12.3355,0,0,0,12.3355,96.671h72A12.3355,12.3355,0,0,0,96.671,84.3355v-72A12.3355,12.3355,0,0,0,84.3355,0h-72A12.3355,12.3355,0,0,0,0,12.3355ZM31.1175,75.9419a94.1917,94.1917,0,0,1-10.1508,3.1114l-.0163.0022a96.991,96.991,0,0,1,1.6922-10.4926,56.8232,56.8232,0,0,1,3.1159-9.251L39.8515,71.58A56.9914,56.9914,0,0,1,31.1175,75.9419Zm42.62-43.285L44.494,66.3243,30.4009,54.0555,59.6441,20.3892a8.0736,8.0736,0,0,1,11.3925-.7887l1.9046,1.6582A8.0775,8.0775,0,0,1,73.7371,32.6569Z"/>
                                            </g>
                                        </g>
                                    </svg>
                                </div>
                            </div>
                            <div class="customize_lab_profile_content">
                                <input class="customize_profile_name" type="text" value="{{ $lab->name }}" name="name">
                                <span class="customize_lab_color color_picker_label" data-color=''>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 167.5838 167.5838">
                        <g id="Layer_2" data-name="Layer 2">
                        <g id="Layer_1-2" data-name="Layer 1">
                            <path
                                d="M161.9023,22.8172l-32.9556,41.95L111.2672,87.3485a35.0133,35.0133,0,0,0-9.8794-14.9458,35.1619,35.1619,0,0,0-15.6206-8.5639l19.3177-18.551L144.7188,7.0724c6.3069-6.9871,15.2788-9.1791,20-4.8474S168.2064,15.83,161.9023,22.8172ZM93.7732,80.9193c-9.1423-8.3777-21.9936-9.3172-30.3061-.1017C50.1387,95.605,54.61,111.6046,44.5356,127.0727c0,0,34.0328,4.1446,52.0761-15.7981C104.9216,102.0586,102.9182,89.2976,93.7732,80.9193Zm19.7241,24.0533a32.5318,32.5318,0,0,1-7.5706,14.827c-15.9889,17.6763-40.603,20.3141-53.8562,20.3141a78.73,78.73,0,0,1-9.0429-.45l-20.0107-2.5512,11.0006-16.9993c3.2682-5.02,4.505-10.4852,5.9385-16.8136,2.0641-9.0817,4.62-20.3843,14.1951-31.01A32.0754,32.0754,0,0,1,68.08,63.31l28.32-27.2029,1.3209-1.274h-31.87A65.8519,65.8519,0,0,0,0,100.6854v1.0465a65.8519,65.8519,0,0,0,65.8519,65.8519h0a65.8519,65.8519,0,0,0,65.8519-65.8519V81.7126ZM93.7732,80.9193c-9.1423-8.3777-21.9936-9.3172-30.3061-.1017C50.1387,95.605,54.61,111.6046,44.5356,127.0727c0,0,34.0328,4.1446,52.0761-15.7981C104.9216,102.0586,102.9182,89.2976,93.7732,80.9193Z"/>
                        </g>
                        </g>
                    </svg>
                    <span class="color_picker_label_value">{{$lab->color}}</span>
                </span>
                                <input type="color" class="color_picker_input" data-type="icon"/>
                                <input type="hidden" name="color" class="color_picker_input_hidden"
                                       value="{{$lab->color}}"
                                       data-type="icon"/>
                            </div>
                        </div>
                        <div class="customize_lab_background">
                            <h4 class="customize_background_heading">Header</h4>
                            <div class="customize_background_content">
                                <div
                                    class="customize_background_preview g_et_al_border_1px_accent @if($lab->header_image == '') no-custom-data @endif">
                                    <div class="profile_overlay">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.55 96.06">
                                            <g id="Layer_2" data-name="Layer 2">
                                                <g id="Layer_1-2" data-name="Layer 1">
                                                    <path
                                                        d="M52.27,36.82A16.92,16.92,0,1,0,69.19,53.74,16.94,16.94,0,0,0,52.27,36.82Z"/>
                                                    <path
                                                        d="M91.16,13.88H77L74,4c-.66-2.18-2.77-4-4.69-4H35.21c-1.91,0-4,1.79-4.68,4l-3,9.91h-3.1V5.2H15.48v8.68h-2.1A13.38,13.38,0,0,0,0,27.27V82.68A13.38,13.38,0,0,0,13.38,96.06H91.16a13.38,13.38,0,0,0,13.39-13.38V27.27A13.38,13.38,0,0,0,91.16,13.88ZM36.36,5.2H45.3v8.93H36.36ZM52.27,79.09A25.35,25.35,0,1,1,77.62,53.74,25.38,25.38,0,0,1,52.27,79.09Z"/>
                                                </g>
                                            </g>
                                        </svg>
                                    </div>
                                    <img
                                        src="@if($lab->header_image != '') {{asset('storage/'.$lab->header_image)}} @else {{asset('img/frontend/backgrounds/bg-cover.png')}} @endif"
                                        alt="" id="header_image" class="image_uploader" alt="">
                                    <input type="file" name="header_image" style="display: none;"
                                           class="image_uploader_file" data-type="header"/>
                                    <span class="delete_option" data-type="header" data-field="image"><svg
                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129.94 129.94"><g
                                                id="Layer_2"
                                                data-name="Layer 2"><g
                                                    id="Layer_1-2" data-name="Layer 1"><path
                                                        d="M112.06,0H0V112.06a17.88,17.88,0,0,0,17.88,17.88h94.18a17.87,17.87,0,0,0,17.88-17.88V17.88A17.88,17.88,0,0,0,112.06,0Zm12.88,112.06a12.9,12.9,0,0,1-12.88,12.88H17.88A12.9,12.9,0,0,1,5,112.06V5H112.06a12.9,12.9,0,0,1,12.88,12.88ZM102,40,77,65l25,25a8.5,8.5,0,1,1-12,12L65,77,40,102a8.5,8.5,0,1,1-12-12L53,65l-25-25a8.5,8.5,0,1,1,12-12L65,53l25-25a8.5,8.5,0,1,1,12,12Z"/></g></g></svg></span>
                                    <input type="hidden" name="header_image_remove" style="display: none;"
                                           id="header_image_remove" value="0"/>
                                </div>
                                <div class="customize_background_edit">
                                    <select name="header_fill_type" class="lab_bg_image custom_background_fill_type"
                                            data-type="header">
                                        <option
                                            value="fill" {{$lab->header_fill_type == 'fill'?'selected="selected"':''}}>
                                            Fill
                                        </option>
                                        <option
                                            value="stretch" {{$lab->header_fill_type == 'stretch'?'selected="selected"':''}}>
                                            Stretch
                                        </option>
                                        <option
                                            value="tile" {{$lab->header_fill_type == 'tile'?'selected="selected"':''}}>
                                            Tile
                                        </option>
                                    </select>
                                    <button type="button"
                                            class="lab_bg_color color_picker_label @if($lab->header_color == '') no-custom-data @endif"
                                            data-color='{{$lab->header_color}}'>
                        <span class="color_picker_label_value">
                            @if($lab->header_color == '')
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 167.5838 167.5838">
                                <g id="Layer_2" data-name="Layer 2">
                                <g id="Layer_1-2" data-name="Layer 1">
                                    <path
                                        d="M161.9023,22.8172l-32.9556,41.95L111.2672,87.3485a35.0133,35.0133,0,0,0-9.8794-14.9458,35.1619,35.1619,0,0,0-15.6206-8.5639l19.3177-18.551L144.7188,7.0724c6.3069-6.9871,15.2788-9.1791,20-4.8474S168.2064,15.83,161.9023,22.8172ZM93.7732,80.9193c-9.1423-8.3777-21.9936-9.3172-30.3061-.1017C50.1387,95.605,54.61,111.6046,44.5356,127.0727c0,0,34.0328,4.1446,52.0761-15.7981C104.9216,102.0586,102.9182,89.2976,93.7732,80.9193Zm19.7241,24.0533a32.5318,32.5318,0,0,1-7.5706,14.827c-15.9889,17.6763-40.603,20.3141-53.8562,20.3141a78.73,78.73,0,0,1-9.0429-.45l-20.0107-2.5512,11.0006-16.9993c3.2682-5.02,4.505-10.4852,5.9385-16.8136,2.0641-9.0817,4.62-20.3843,14.1951-31.01A32.0754,32.0754,0,0,1,68.08,63.31l28.32-27.2029,1.3209-1.274h-31.87A65.8519,65.8519,0,0,0,0,100.6854v1.0465a65.8519,65.8519,0,0,0,65.8519,65.8519h0a65.8519,65.8519,0,0,0,65.8519-65.8519V81.7126ZM93.7732,80.9193c-9.1423-8.3777-21.9936-9.3172-30.3061-.1017C50.1387,95.605,54.61,111.6046,44.5356,127.0727c0,0,34.0328,4.1446,52.0761-15.7981C104.9216,102.0586,102.9182,89.2976,93.7732,80.9193Z"/>
                                </g>
                                </g>
                            </svg>
                            @else
                                {{$lab->header_color}}
                            @endif
                        </span>
                                        <span class="delete_option" data-type="header" data-field="color"><svg
                                                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129.94 129.94"><g
                                                    id="Layer_2" data-name="Layer 2"><g id="Layer_1-2"
                                                                                        data-name="Layer 1"><path
                                                            d="M112.06,0H0V112.06a17.88,17.88,0,0,0,17.88,17.88h94.18a17.87,17.87,0,0,0,17.88-17.88V17.88A17.88,17.88,0,0,0,112.06,0Zm12.88,112.06a12.9,12.9,0,0,1-12.88,12.88H17.88A12.9,12.9,0,0,1,5,112.06V5H112.06a12.9,12.9,0,0,1,12.88,12.88ZM102,40,77,65l25,25a8.5,8.5,0,1,1-12,12L65,77,40,102a8.5,8.5,0,1,1-12-12L53,65l-25-25a8.5,8.5,0,1,1,12-12L65,53l25-25a8.5,8.5,0,1,1,12,12Z"/></g></g></svg></span>
                                    </button>
                                    <input type="color" class="color_picker_input" data-type="header"/>
                                    <input type="hidden" name="header_color" class="color_picker_input_hidden"
                                           value="{{$lab->header_color}}" data-type="header"/>
                                </div>
                            </div>
                        </div>
                        <div class="customize_lab_background">
                            <h4 class="customize_background_heading">Background</h4>
                            <div class="customize_background_content">
                                <div
                                    class="customize_background_preview g_et_al_border_1px_accent  @if($lab->background_image == '') no-custom-data @endif">
                                    <div class="profile_overlay">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.55 96.06">
                                            <g id="Layer_2" data-name="Layer 2">
                                                <g id="Layer_1-2" data-name="Layer 1">
                                                    <path
                                                        d="M52.27,36.82A16.92,16.92,0,1,0,69.19,53.74,16.94,16.94,0,0,0,52.27,36.82Z"/>
                                                    <path
                                                        d="M91.16,13.88H77L74,4c-.66-2.18-2.77-4-4.69-4H35.21c-1.91,0-4,1.79-4.68,4l-3,9.91h-3.1V5.2H15.48v8.68h-2.1A13.38,13.38,0,0,0,0,27.27V82.68A13.38,13.38,0,0,0,13.38,96.06H91.16a13.38,13.38,0,0,0,13.39-13.38V27.27A13.38,13.38,0,0,0,91.16,13.88ZM36.36,5.2H45.3v8.93H36.36ZM52.27,79.09A25.35,25.35,0,1,1,77.62,53.74,25.38,25.38,0,0,1,52.27,79.09Z"/>
                                                </g>
                                            </g>
                                        </svg>
                                    </div>
                                    <img
                                        src="@if($lab->background_image != '') {{asset('storage/'.$lab->background_image)}} @else {{asset('img/frontend/backgrounds/bg-cover.png')}} @endif"
                                        alt="" id="background_image" class="image_uploader" alt="">
                                    <input type="file" name="background_image" style="display: none;"
                                           class="image_uploader_file" data-type="background"/>
                                    <span class="delete_option" data-type="background" data-field="image"><svg
                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129.94 129.94"><g
                                                id="Layer_2"
                                                data-name="Layer 2"><g
                                                    id="Layer_1-2" data-name="Layer 1"><path
                                                        d="M112.06,0H0V112.06a17.88,17.88,0,0,0,17.88,17.88h94.18a17.87,17.87,0,0,0,17.88-17.88V17.88A17.88,17.88,0,0,0,112.06,0Zm12.88,112.06a12.9,12.9,0,0,1-12.88,12.88H17.88A12.9,12.9,0,0,1,5,112.06V5H112.06a12.9,12.9,0,0,1,12.88,12.88ZM102,40,77,65l25,25a8.5,8.5,0,1,1-12,12L65,77,40,102a8.5,8.5,0,1,1-12-12L53,65l-25-25a8.5,8.5,0,1,1,12-12L65,53l25-25a8.5,8.5,0,1,1,12,12Z"/></g></g></svg></span>
                                    <input type="hidden" name="background_image_remove" style="display: none;"
                                           id="background_image_remove" value="0"/>
                                </div>
                                <div class="customize_background_edit">
                                    <select name="background_fill_type" class="lab_bg_image custom_background_fill_type"
                                            data-type="background">
                                        <option
                                            value="fill" {{$lab->background_fill_type == 'fill'?'selected="selected"':''}}>
                                            Fill
                                        </option>
                                        <option
                                            value="stretch" {{$lab->background_fill_type == 'stretch'?'selected="selected"':''}}>
                                            Stretch
                                        </option>
                                        <option
                                            value="tile" {{$lab->background_fill_type == 'tile'?'selected="selected"':''}}>
                                            Tile
                                        </option>
                                    </select>
                                    <button type="button"
                                            class="lab_bg_color color_picker_label @if($lab->background_color == '') no-custom-data @endif"
                                            data-color='{{$lab->background_color}}'>
                        <span class="color_picker_label_value">
                            @if($lab->background_color == '')
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 167.5838 167.5838">
                                <g id="Layer_2" data-name="Layer 2">
                                <g id="Layer_1-2" data-name="Layer 1">
                                    <path
                                        d="M161.9023,22.8172l-32.9556,41.95L111.2672,87.3485a35.0133,35.0133,0,0,0-9.8794-14.9458,35.1619,35.1619,0,0,0-15.6206-8.5639l19.3177-18.551L144.7188,7.0724c6.3069-6.9871,15.2788-9.1791,20-4.8474S168.2064,15.83,161.9023,22.8172ZM93.7732,80.9193c-9.1423-8.3777-21.9936-9.3172-30.3061-.1017C50.1387,95.605,54.61,111.6046,44.5356,127.0727c0,0,34.0328,4.1446,52.0761-15.7981C104.9216,102.0586,102.9182,89.2976,93.7732,80.9193Zm19.7241,24.0533a32.5318,32.5318,0,0,1-7.5706,14.827c-15.9889,17.6763-40.603,20.3141-53.8562,20.3141a78.73,78.73,0,0,1-9.0429-.45l-20.0107-2.5512,11.0006-16.9993c3.2682-5.02,4.505-10.4852,5.9385-16.8136,2.0641-9.0817,4.62-20.3843,14.1951-31.01A32.0754,32.0754,0,0,1,68.08,63.31l28.32-27.2029,1.3209-1.274h-31.87A65.8519,65.8519,0,0,0,0,100.6854v1.0465a65.8519,65.8519,0,0,0,65.8519,65.8519h0a65.8519,65.8519,0,0,0,65.8519-65.8519V81.7126ZM93.7732,80.9193c-9.1423-8.3777-21.9936-9.3172-30.3061-.1017C50.1387,95.605,54.61,111.6046,44.5356,127.0727c0,0,34.0328,4.1446,52.0761-15.7981C104.9216,102.0586,102.9182,89.2976,93.7732,80.9193Z"/>
                                </g>
                                </g>
                            </svg>
                            @else
                                {{$lab->background_color}}
                            @endif
                        </span>
                                        <span class="delete_option" data-type="background" data-field="color"><svg
                                                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129.94 129.94"><g
                                                    id="Layer_2" data-name="Layer 2"><g id="Layer_1-2"
                                                                                        data-name="Layer 1"><path
                                                            d="M112.06,0H0V112.06a17.88,17.88,0,0,0,17.88,17.88h94.18a17.87,17.87,0,0,0,17.88-17.88V17.88A17.88,17.88,0,0,0,112.06,0Zm12.88,112.06a12.9,12.9,0,0,1-12.88,12.88H17.88A12.9,12.9,0,0,1,5,112.06V5H112.06a12.9,12.9,0,0,1,12.88,12.88ZM102,40,77,65l25,25a8.5,8.5,0,1,1-12,12L65,77,40,102a8.5,8.5,0,1,1-12-12L53,65l-25-25a8.5,8.5,0,1,1,12-12L65,53l25-25a8.5,8.5,0,1,1,12,12Z"/></g></g></svg></span>
                                    </button>
                                    <input type="color" class="color_picker_input" data-type="background"/>
                                    <input type="hidden" name="background_color" class="color_picker_input_hidden"
                                           value="{{$lab->background_color}}" data-type="background"/>
                                </div>
                            </div>
                        </div>
                        <div class="customize_lab_background">
                            <h4 class="customize_background_heading">Footer</h4>
                            <div class="customize_background_content">
                                <div
                                    class="customize_background_preview g_et_al_border_1px_accent @if($lab->footer_image == '') no-custom-data @endif">
                                    <div class="profile_overlay">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.55 96.06">
                                            <g id="Layer_2" data-name="Layer 2">
                                                <g id="Layer_1-2" data-name="Layer 1">
                                                    <path
                                                        d="M52.27,36.82A16.92,16.92,0,1,0,69.19,53.74,16.94,16.94,0,0,0,52.27,36.82Z"/>
                                                    <path
                                                        d="M91.16,13.88H77L74,4c-.66-2.18-2.77-4-4.69-4H35.21c-1.91,0-4,1.79-4.68,4l-3,9.91h-3.1V5.2H15.48v8.68h-2.1A13.38,13.38,0,0,0,0,27.27V82.68A13.38,13.38,0,0,0,13.38,96.06H91.16a13.38,13.38,0,0,0,13.39-13.38V27.27A13.38,13.38,0,0,0,91.16,13.88ZM36.36,5.2H45.3v8.93H36.36ZM52.27,79.09A25.35,25.35,0,1,1,77.62,53.74,25.38,25.38,0,0,1,52.27,79.09Z"/>
                                                </g>
                                            </g>
                                        </svg>
                                    </div>
                                    <img
                                        src="@if($lab->footer_image != ''){{asset('storage/'.$lab->footer_image)}} @else {{asset('img/frontend/backgrounds/bg-cover.png')}} @endif"
                                        alt="" id="footer_image" class="image_uploader" alt="">
                                    <input type="file" name="footer_image" style="display: none;"
                                           class="image_uploader_file" data-type="footer"/>
                                    <span class="delete_option" data-type="footer" data-field="image"><svg
                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129.94 129.94"><g
                                                id="Layer_2"
                                                data-name="Layer 2"><g
                                                    id="Layer_1-2" data-name="Layer 1"><path
                                                        d="M112.06,0H0V112.06a17.88,17.88,0,0,0,17.88,17.88h94.18a17.87,17.87,0,0,0,17.88-17.88V17.88A17.88,17.88,0,0,0,112.06,0Zm12.88,112.06a12.9,12.9,0,0,1-12.88,12.88H17.88A12.9,12.9,0,0,1,5,112.06V5H112.06a12.9,12.9,0,0,1,12.88,12.88ZM102,40,77,65l25,25a8.5,8.5,0,1,1-12,12L65,77,40,102a8.5,8.5,0,1,1-12-12L53,65l-25-25a8.5,8.5,0,1,1,12-12L65,53l25-25a8.5,8.5,0,1,1,12,12Z"/></g></g></svg></span>
                                    <input type="hidden" name="footer_image_remove" style="display: none;"
                                           id="footer_image_remove" value="0"/>
                                </div>
                                <div class="customize_background_edit">
                                    <select name="footer_fill_type" class="lab_bg_image custom_background_fill_type"
                                            data-type="footer">
                                        <option
                                            value="fill" {{$lab->footer_fill_type == 'fill'?'selected="selected"':''}}>
                                            Fill
                                        </option>
                                        <option
                                            value="stretch" {{$lab->footer_fill_type == 'stretch'?'selected="selected"':''}}>
                                            Stretch
                                        </option>
                                        <option
                                            value="tile" {{$lab->footer_fill_type == 'tile'?'selected="selected"':''}}>
                                            Tile
                                        </option>
                                    </select>
                                    <button type="button"
                                            class="lab_bg_color color_picker_label @if($lab->footer_color == '') no-custom-data @endif"
                                            data-color='{{$lab->footer_color}}'>
                        <span class="color_picker_label_value">
                            @if($lab->footer_color == '')
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 167.5838 167.5838">
                                <g id="Layer_2" data-name="Layer 2">
                                <g id="Layer_1-2" data-name="Layer 1">
                                    <path
                                        d="M161.9023,22.8172l-32.9556,41.95L111.2672,87.3485a35.0133,35.0133,0,0,0-9.8794-14.9458,35.1619,35.1619,0,0,0-15.6206-8.5639l19.3177-18.551L144.7188,7.0724c6.3069-6.9871,15.2788-9.1791,20-4.8474S168.2064,15.83,161.9023,22.8172ZM93.7732,80.9193c-9.1423-8.3777-21.9936-9.3172-30.3061-.1017C50.1387,95.605,54.61,111.6046,44.5356,127.0727c0,0,34.0328,4.1446,52.0761-15.7981C104.9216,102.0586,102.9182,89.2976,93.7732,80.9193Zm19.7241,24.0533a32.5318,32.5318,0,0,1-7.5706,14.827c-15.9889,17.6763-40.603,20.3141-53.8562,20.3141a78.73,78.73,0,0,1-9.0429-.45l-20.0107-2.5512,11.0006-16.9993c3.2682-5.02,4.505-10.4852,5.9385-16.8136,2.0641-9.0817,4.62-20.3843,14.1951-31.01A32.0754,32.0754,0,0,1,68.08,63.31l28.32-27.2029,1.3209-1.274h-31.87A65.8519,65.8519,0,0,0,0,100.6854v1.0465a65.8519,65.8519,0,0,0,65.8519,65.8519h0a65.8519,65.8519,0,0,0,65.8519-65.8519V81.7126ZM93.7732,80.9193c-9.1423-8.3777-21.9936-9.3172-30.3061-.1017C50.1387,95.605,54.61,111.6046,44.5356,127.0727c0,0,34.0328,4.1446,52.0761-15.7981C104.9216,102.0586,102.9182,89.2976,93.7732,80.9193Z"/>
                                </g>
                                </g>
                            </svg>
                            @else
                                {{$lab->footer_color}}
                            @endif
                        </span>
                                        <span class="delete_option" data-type="footer" data-field="color"><svg
                                                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129.94 129.94"><g
                                                    id="Layer_2" data-name="Layer 2"><g id="Layer_1-2"
                                                                                        data-name="Layer 1"><path
                                                            d="M112.06,0H0V112.06a17.88,17.88,0,0,0,17.88,17.88h94.18a17.87,17.87,0,0,0,17.88-17.88V17.88A17.88,17.88,0,0,0,112.06,0Zm12.88,112.06a12.9,12.9,0,0,1-12.88,12.88H17.88A12.9,12.9,0,0,1,5,112.06V5H112.06a12.9,12.9,0,0,1,12.88,12.88ZM102,40,77,65l25,25a8.5,8.5,0,1,1-12,12L65,77,40,102a8.5,8.5,0,1,1-12-12L53,65l-25-25a8.5,8.5,0,1,1,12-12L65,53l25-25a8.5,8.5,0,1,1,12,12Z"/></g></g></svg></span>
                                    </button>
                                    <input type="color" class="color_picker_input" data-type="footer"/>
                                    <input type="hidden" name="footer_color" class="color_picker_input_hidden"
                                           value="{{$lab->footer_color}}" data-type="footer"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="lab_actions">
                            <button type="button" class="customize_btn btn-secondary" data-dismiss="modal"
                                    id="cancel_lab_customize">Cancel
                            </button>
                            <button type="submit" class="customize_btn btn-primary">Confirm</button>
                        </div>
                    </div>
                    {{ html()->closeModelForm() }}
                </div>
            </div>
        </div>
    @endif
    <div id="rename_folder_dialog" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Rename folder<span id="selected_template_name"></span></h4>
                    <button type="button" class="close" data-dismiss="modal"><i class="fa fa-times"
                                                                                aria-hidden="true"
                                                                                style="color: red"></i>
                    </button>
                </div>
                <div class="modal-body">
                    @include('frontend.user.form.updatefolder')
                </div>
            </div>
        </div>
    </div>
    <div id="delete_folder_dialog" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Really delete?</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        {{--<button type="submit" class="btn btn-primary">Submit</button>--}}
                        <div style="margin: 0 auto; text-align: center; ">
                            <button class="btn btn-lg btn-danger" id="confirmDelete"
                                    onclick="roolyDeleteSelectedLabFolder()"><i
                                    class="fas fa-trash" aria-hidden="true"></i> Delete
                            </button>

                            <button class="btn btn-secondary btn-lg" data-dismiss="modal"><i class="fas fa-undo"
                                                                                             aria-hidden="true"></i>
                                Cancel
                            </button>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@push('after-styles')
    <style>
        /* CSS only for this page */
        .modal-open {
            overflow: auto;
            padding-right: 0 !important;
        }

        .modal-footer {
            padding: 0;
            border-top: none
        }

        .modal-footer .customize_btn {
            margin-bottom: 0px;
        }

        /* Custom Background */
        .custom_background {
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
            bottom: 0;
            z-index: -1;
        }

        .header-overlay, .footer-overlay, .background-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
        }

        .custom_background_header {
            height: 19%;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .custom_background_main {
            height: 63%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            position: relative;
        }

        .custom_background_footer {
            height: 18%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            position: relative;
        }

        .newfolder .dropdown-toggle:after {
            content: none;
        }

        /* Custom Background */

        /* Customize Popup */
        .color_picker_input {
            visibility: hidden;
            width: 0;
            margin-left: -70px;
        }

        .image_uploader {
            cursor: pointer;
        }

        .color_picker_label {
            text-transform: uppercase;
            cursor: pointer;
        }
    </style>
@endpush

@push('after-styles')
    {{-- Ambient Styles --}}
    <style id="styles">
        /* .g_et_al_accent_text{
            color:





        {{$lab->color}}





        ;
                                                    }
                                                    .g_et_al_accent_button{
                                                        background-color:





        {{$lab->color}}





        ;
                                                        border-color:





        {{$lab->color}}





        ;
                                                    }
                                                    .g_et_al_accent_button:hover{
                                                        background-color:





        {{$darkerColor}}





        ;
                                                        border-color:





        {{$lab->color}}





        ;
                                                    }
                                                    .g_et_al_accent_outline_button{
                                                        color:





        {{$lab->color}}





        ;
                                                        border-color:





        {{$lab->color}}





        ;
                                                    }
                                                    .g_et_al_accent_outline_button:hover, .g_et_al_accent_outline_button:not(:disabled):not(.disabled):active{
                                                        background-color:





        {{$lighterColor}}





        ;
                                                        border-color:





        {{$lab->color}}





        ;
                                                    }
                                                    .g_et_al_accent_outline_button:focus{
                                                        box-shadow: 0 0 0 0.2rem





        {{$lab->color}}





        80;
                                                    }

                                                    .btn-outline-info, .filter_dropdown .dropdown-menu{
                                                        color:





        {{$lab->color}}





        ;
                                                        border-color:





        {{$lab->color}}





        ;
                                                    }
                                                    .show > .btn-outline-info.dropdown-toggle
                                                    {
                                                        color:#000000;
                                                        background-color:





        {{$lab->color}}





        ;
                                                        border-color:





        {{$lab->color}}





        ;
                                                    }
                                                    .drag-section [type=radio]:checked + div{
                                                        border-bottom-color:





        {{$lab->color}}





        ;
                                                    }
                                                    .drag-section [type=radio]:checked + div .g_et_al_header3, .filter_dropdown .dropdown-menu .g_et_al_header5{
                                                        color:





        {{$lab->color}}





        ;
                                                    }
                                                    .form-control:focus{
                                                        border-color:





        {{$lab->color}}





        ;
                                                        box-shadow: 0 0 0 0.2rem





        {{$lab->color}}





        40;
                                                    }
                                                    .show > .btn-outline-info.dropdown-toggle:focus{
                                                        box-shadow: 0 0 0 0.2rem





        {{$lab->color}}





        80;
                                                    }
                                                    .show > .btn-outline-info.dropdown-toggle{
                                                        background-color:





        {{$lighterColor}}





        ;
                                                        border-color:





        {{$lab->color}}





        ;
                                                    }
                                                    */

        /* .btn-ghost-info:hover{
            background-color:





        {{$lighterColor}}





        ;
                                                    } */


        /* Accent Color CSS */

        .g_et_al_header1, .g_et_al_header2, .g_et_al_header3, .g_et_al_header4, .g_et_al_header5, .header_image p, .g_et_al_title, .g_et_al_listtitle, .my_board label, .drag_section_selection .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default .select2-selection--multiple {
            color: {{$lab->color}}       !important;
        }

        .btn-outline-info, .filter_dropdown .dropdown-menu, .create-btn {
            color: {{$lab->color}};
            border-color: {{$lab->color}};
        }

        .show > .btn-outline-info.dropdown-toggle {
            color: #000000;
            background-color: {{$lab->color}};
            border-color: {{$lab->color}};
        }

        .btn-outline-info:hover {
            background-color: {{$lighterColor}};
            border-color: {{$lab->color}};
        }

        .board_preview svg:hover {
            background-color: {{$lighterColor}};
        }

        .btn-primary {
            background-color: {{$lab->color}}       !important;
            border-color: {{$lab->color}};
        }

        .btn-primary:hover, .btn-primary:focus {
            background-color: {{$darkerColor}}       !important;
            border-color: {{$lab->color}};
        }

        .form-group-btn, .form-group-btn:focus {
            color: {{$lab->color}};
        }

        .drag-section [type=radio]:checked + div {
            border-bottom-color: {{$lab->color}};
        }

        .drag-section [type=radio]:checked + div .g_et_al_header3, .filter_dropdown .dropdown-menu .g_et_al_header5 {
            color: {{$lab->color}};
        }

        .form-control:focus {
            border-color: {{$lab->color}};
            box-shadow: 0 0 0 0.2rem {{$lab->color}}40;
        }

        .select2-container--default .select2-selection--multiple input::placeholder, input::placeholder {
            color: {{$lab->color}}       !important;
        }

        .drag_section_selection .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default .select2-selection--multiple, .filter_dropdown.dropdown.float-end.show > button {
            border-color: {{$lab->color}};
        }

        .btn-outline-info:focus, .btn-outline-info.focus, .btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-info.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem {{$lab->color}}80;
        }

        .btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active, .show > .btn-outline-info.dropdown-toggle {
            background-color: {{$lighterColor}};
            border-color: {{$lab->color}};
        }

        .customize_lab_color {
            background-color: {{$lab->color}};
        }

        .modal .modal-header .modal-title {
            color: {{$lab->color}};
        }

        .modal-content {
            border: 1px solid {{$lab->color}}       !important;
        }

        .g_et_al_color_accent {
            color: {{$lab->color}}       !important;
        }

        .g_et_al_fill_accent {
            fill: {{$lab->color}}       !important;
        }

        .g_et_al_border_1px_accent {
            border: 1px solid{{$lab->color}};
        }

        .g_et_al_border_right_1px_accent {
            border-right: 1px solid{{$lab->color}}






        }

    </style>

@endpush