<div class="page-header">
    <h1 class="title">{{ Lang_translate('_DASHBOARD', 'standard') }}</h1>
</div>

<div class="d-grid">
    <div class="d-row">
        <div class="dashboard__actions is-block">
            <button id="btn-new-layout" class="btn btn-primary dahsboard__button--add js-add-layout">{{ Lang_translate('_DASHBOARD_SETTING_ADD_NEW_LAYOUT', 'dashboardsetting') }}</button>

            <form id="form-layout" class="dashboard__add">
                <div class="form-group">
                    <label>{{ Lang_translate('_DASHBOARD_SETTING_LAYOUT_NAME', 'dashboardsetting') }}</label>
                    <input name="name" placeholder="{{ Lang_translate('_DASHBOARD_SETTING_LAYOUT_NAME', 'dashboardsetting') }}" class="form-control" type="text" value="">
                </div>

                <div class="form-group">
                    <label>{{ Lang_translate('_DASHBOARD_SETTING_LAYOUT_CAPTION', 'dashboardsetting') }}</label>
                    <textarea name="caption" maxlength="255" placeholder="{{ Lang_translate('_DASHBOARD_SETTING_LAYOUT_CAPTION', 'dashboardsetting') }}" class="form-control textarea"></textarea>
                </div>

                <div class="dashboard__select dashboard__select--layout">
                    <label>{{ Lang_translate('_DASHBOARD_SETTING_SELECT_STATUS', 'dashboardsetting') }}</label>
                    <select name="status" class="form-control js-select-layout">
                        <option value="draft">
                            {{ Lang_translate('_DASHBOARD_SETTING_DRAFT_STATUS', 'dashboardsetting') }}
                        </option>
                        <option value="publish">
                            {{ Lang_translate('_DASHBOARD_SETTING_PUBLISH_STATUS', 'dashboardsetting') }}
                        </option>
                    </select>
                </div>

                <button type="submit" class="btn btn-primary dahsboard__button--add js-add-layout btn-block">{{ Lang_translate('_DASHBOARD_SETTING_CREATE_NEW_LAYOUT', 'dashboardsetting') }}</button>

                <div class="dashboard__message dashboard_layout__ok">{{ Lang_translate('_DASHBOARD_LAYOUT_SAVE_MESSAGE_OK', 'dashboardsetting') }}</div>
                <div class="dashboard__message dashboard_layout__ko">{{ Lang_translate('_DASHBOARD_LAYOUT_SAVE_MESSAGE_KO', 'dashboardsetting') }}</div>
            </form>
        </div>
    </div>
    <table class="table table-striped table-bordered display" style="width:100%" id="layouts"></table>
</div>

{% include 'modal-clone.html.twig' %}

<script type="application/javascript">

    $(function () {
        const showUrl = "{{ showUrl }}";
        const editUrl = "{{ editUrl }}";
        const permissionUrl = "{{ permissionUrl }}";
        const cloneUrl = "{{ cloneUrl }}";
        const dashboardSortable = $("#dashboard-sortable");
        const selectBlock = $('.js-select-block');
        const selectType = $('.js-select-type');
        const selectAction = $('.js-select-action');
        const addBlock = $('.js-add-block');
        const saveField = $('.js-save-block');
        const blockAction = $('.dashboard__actions');
        const blockActionWidth = blockAction.width();
        const windowWidth = $(window).width();
        const elementOffset = blockAction.offset();
        const elementOffsetTop = 108;
        const elementOffsetLeft = elementOffset.left;
        const templatePath = "{{ templatePath }}";
        const btnNewLayout = $('#btn-new-layout');
        const formLayout = $('#form-layout');
        const addLayoutBtn = $('.js-add-layout');
        const layoutsTable = $('#layouts');
        let openedLayoutForm = false;

        if (windowWidth >= 1024) {
            $(window).scroll(function () {
                anchorSidebar();
            });
        }

        initSortable();
        formLayout.slideUp();

        table = layoutsTable.FormaTable({
            rowId: "id",
            processing: true,
            serverSide: true,
            paging: false,
            columns: [  // definisco le colonne
                { data: 'name', title: '{{ Lang_translate("_DASHBOARD_LAYOUT", "dashboardsetting") }}', sortable: false, width: 'auto', edit: { type: 'text' } },
                { data: 'caption', title: '{{ Lang_translate("_DASHBOARD_LAYOUT_CAPTION", "dashboardsetting") }}', sortable: false, width: 'auto', edit: { type: 'textarea' } },
                { data: 'status', title: '{{ Lang_translate("_DASHBOARD_LAYOUT_STATUS", "dashboardsetting") }}', sortable: false, width: '25%',
                    edit: {
                        type: 'select',
                        options: {
                            'draft': "{{ Lang_translate('_DASHBOARD_STATUS_DRAFT', 'dashboardsetting') }}",
                            'publish': "{{ Lang_translate('_DASHBOARD_STATUS_PUBLISH', 'dashboardsetting') }}",
                        }
                    }, 
                    render: function(data, type, row, meta) {
                        return row.status;
                    }
                },
                { data: 'default', title: '{{ Lang_translate("_DASHBOARD_LAYOUT_DEFAULT", "dashboardsetting") }}', sortable: false, width: '10%',
                    render: function(data, type, row, meta) {
                        var checked = row.default ? 'disabled checked' : '';
                        return '<div class="text-center"><input class="default_check" type="checkbox" value="1" data-id="' + row.id + '" ' + checked + '></div>';
                    }
                },
                { data: 'clone', title: '&nbsp;', sortable: false, width: '10%', 
                    render: function(data, type, row, meta) {
                        return '<div class="text-center"><a onclick="cloneFunc(' + row.id + ')" href="#" class="btn btn-primary"><i class="glyphicon glyphicon-duplicate"></i> </a></div>';
                    }
                },
                { data: 'edit', title: '&nbsp;', sortable: false, width: '10%', 
                    render: function(data, type, row, meta) {
                        return '<div class="text-center"><a href="' + editUrl + '&dashboard=' + row.id + '" class="btn btn-warning"><i class="glyphicon glyphicon-pencil"></i> </a></div>';
                    }
                },

                { data: 'permission', title: '&nbsp;', sortable: false, width: '10%', 
                    render: function(data, type, row, meta) {
                        var disabled = row.default ? 'disabled' : '';
                        return '<div class="text-center"><a href="' + permissionUrl + '&id=' + row.id + '&instance=dashboardsetting&load=1" class="btn btn-success ' + disabled + '"><i class="glyphicon glyphicon-user"></i> </a></div>';
                    }
                }, 

                { data: 'delete', title: '&nbsp;', sortable: false, width: '10%', 
                    render: function(data, type, row, meta) {
                         var disabled = row.default ? 'disabled' : '';
                        return '<div class="text-center"><button ' + disabled + ' type="button" class="btn btn-danger btn-del" data-id="' + row.id + '"><i class="glyphicon glyphicon-trash"></i> </button></div>';
                    }
                },
                
                
               
                
                
            ],
            ajax: {
                url: '{{ ajaxUrl.getLayouts }}',
                type: "GET",
            },
            drawCallback: function() {
                $('.btn-del').click(function(e) {
                    if (confirm("{{ Lang_translate('_DASHBOARD_LAYOUT_SURE_DEL', 'dashboardsetting') }}")) {
                        var delBtn = $(this);
                        // DELETE A LAYOUT
                        $.ajax({
                            url: '{{ ajaxUrl.delLayout }}',
                            type: 'POST',
                            data: { id_layout: delBtn.data('id') },
                            beforeSend: () => {
                                delBtn.attr('disabled', true);
                            },
                            success: (response) => {
                                delBtn.attr('disabled', false);
                                table.reload();
                            },
                            error: err => {
                                console.log(err);
                                delBtn.attr('disabled', false);
                            }
                        });
                    }
                });

                $(".default_check").change(function() {
                    // SET A LAYOUT AS DEFAULT
                    $.ajax({
                        url: '{{ ajaxUrl.defaultLayout }}',
                        type: 'POST',
                        data: { id_layout: $(this).data('id') },
                        success: (response) => {
                            $(".default_check").attr('disabled', false).prop('checked', false);
                            $(this).prop('checked', true).attr('disabled', true);
                            table.reload();
                        },
                        error: err => {
                            console.log(err)
                        }
                    });
                });
            },
            edit: {
                url: '{{ ajaxUrl.editInlineLayout }}',
                type: "POST",
                id: "id"
            },
        });

        btnNewLayout.click(function() {
            openedLayoutForm = !openedLayoutForm;
            if (openedLayoutForm) {
                formLayout.slideDown();
            } else {
                formLayout.slideUp();
            }
        });

        formLayout.submit(function(e) {
            e.preventDefault();
            var addForm = $(this);

            // CREATE NEW LAYOUT
            $.ajax({
                url: '{{ ajaxUrl.saveLayout }}',
                type: 'POST',
                data: addForm.serialize(),
                beforeSend: () => {
                    addLayoutBtn.attr('disabled', true);
                    $('.dashboard__message').css('display', 'none');
                },
                success: (response) => {
                    addLayoutBtn.removeAttr('disabled');
                    $('.dashboard_layout__ok').css('display', 'block');
                    table.reload();

                    // Per mostrare messaggio di Ok inserimento
                    setTimeout(function() {
                        $("#form-layout").trigger('reset');
                        openedLayoutForm = !openedLayoutForm;
                        formLayout.slideUp();
                    }, 1500);
                },
                error: err => {
                    console.log(err)
                    $('.dashboard_layout__ko').css('display', 'block');
                    addLayoutBtn.removeAttr('disabled');
                }
            });
        });

        function initSortable(reinit) {
            if (reinit) {
                dashboardSortable.sortable('destroy');
                dashboardSortable.unbind();
            }
            dashboardSortable.sortable({
                connectWith: "#dashboard-sortable"
            });
        }

        function anchorSidebar() {
            const $scrollTop = $(window).scrollTop();
            const $distance = (elementOffsetTop - $scrollTop);

            if ($distance <= 0) {
                blockAction.addClass('is-fixed');
                blockAction.css('width', blockActionWidth);
                blockAction.css('left', elementOffsetLeft);
                blockAction.css('top', 0);
            } else {
                blockAction.removeClass('is-fixed');
                blockAction.removeAttr('style');
            }
        }
    });
</script>

<style type="text/css">
    .dashboard .d-row {
        align-items: flex-start;
        justify-content: space-between;
        flex-direction: column-reverse;
    }

    @media all and (min-width: 1024px) {
        .dashboard .d-row {
            flex-direction: row;
        }
    }

    .dashboard__select__title {
        margin-bottom: 5px;
    }

    .dashboard__info {
        width: calc(100% - 20px);
        position: relative;
        bottom: 10px;
        left: 10px;
    }

    .dashboard__title {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
        margin-bottom: 10px;
        word-break: break-all;
    }

    .dashboard__image {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
        margin-bottom: 15px;
        word-break: break-all;
    }

    .dashboard__input {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
        margin-bottom: 10px;
        word-break: break-all;
    }

    .dashboard__select {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
        margin-bottom: 15px;
        word-break: break-all;
    }

    .dashboard__infoBlock {
        padding: 15px 15px 0 15px;
        border: 1px solid #ccc;
        margin-bottom: 15px;
        background-color: #efefef;
    }

    .dashboard__infoBlock .dashboard__error {
        text-align: center;
        margin-top: 5px;
    }

    .dashboard__helper {
        font-size: 12px;
        margin-top: 10px;
        text-align: center;
        color: #666;
        font-style: italic;
    }

    .dashboard__checkbox {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
        margin-bottom: 10px;
        word-break: break-all;
    }

    .dashboard__label {
        margin-bottom: 10px;
        text-transform: uppercase;
        display: block;
        text-align: center;
        font-weight: 800;
        word-break: break-all;
    }

    .dashboard__infoContainer {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .dashboard__el {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
        margin-left: 10px;
    }


    .dashboard__el input[type=checkbox],
    .dashboard__el input[type=radio] {
        margin: 0 5px 0 0;
    }

    .dashboard__title--sources {
        margin-top: 10px;
    }

    .dashboard__container {
        background: #e2e1e0;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding: 10px;
    }

    @media all and (min-width: 1024px) {

        .dashboard__container {
            width: 74%;
        }
    }

    #form-layout {
        display: none;
    }
    #form-layout textarea {
        min-width: 100%;
        max-width: 100%;
        min-height: 100px;
        max-height: 200px;
    }

    .dashboard__block {
        padding: 5px;
        box-sizing: border-box;
        flex-basis: 100%;
    }

    .dashboard__content {
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
        height: 100%;
        position: relative;
        padding: 25px 10px 125px 10px;
        cursor: grab;
    }

    .dashboard__message {
        padding: 10px;
        text-align: center;
        margin-top: 10px;
        display: none;
    }

    .dashboard_layout__ok, .dashboard__ok {
        color: #155724;
        background-color: #d4edda;
        border-color: #c3e6cb;
    }

    .dashboard_layout__ko, .dashboard__ko {
        color: #721c24;
        background-color: #f8d7da;
        border-color: #f5c6cb;
    }

    .dashboard__image {
        max-width: 100%;
        height: auto;
    }

    .dashboard__content:focus {
        cursor: grabbing;
    }

    .dashboard__content:hover {
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    }

    .dashboard__remove {
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 16px;
        background-color: transparent;
        border: 0;
        width: 15px;
        height: 15px;
        background-image: url('../templates/standard/static/images/icons/user-panel/icon--up-close.png');
        background-size: cover;
    }

    .dashboard__remove:hover {
        background-image: url('../templates/standard/static/images/icons/user-panel/icon--up-close-hover.png');
    }

    .dashboard__actions, .dashboard_layout__actions {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        flex-direction: column;
    }

    .dashboard__actions.is-fixed {
        z-index: 10;
        margin-top: 10px;
    }

    @media all and (min-width: 1024px) {
        .dashboard__actions, .dashboard_layout__actions {
            width: 25%;
        }

        .dashboard__actions.is-fixed {
            position: fixed;
            margin-top: 10px;
            right: 0;
        }
    }

    .dashboard__select.is-required select {
        border: 1px solid #ff0000;
    }

    .dashboard__select.is-required .dashboard__error {
        display: block;
    }

    .dashboard__error {
        display: none;
        color: #ff0000;
    }

    .dashboard__add {
        display: flex;
        flex-direction: column;
        padding: 20px;
        background-color: #efefef;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-bottom: 40px;
    }

    .dashboard__add .dashboard__select {
        margin-bottom: 20px;
    }

    @media all and (min-width: 1024px) {

        .dashboard__block--4-col {
            flex-basis: 100%;
        }

        .dashboard__block--3-col {
            flex-basis: 75%;
        }

        .dashboard__block--2-col {
            flex-basis: 50%;
        }

        .dashboard__block--1-col {
            flex-basis: 25%;
        }

    }

    .dashboard__select--type,
    .dashboard__select--action {
        display: none;
    }

</style>
