@extends('layouts.tenant.layout_1.app')

@section('page_css')
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css" />
<style type="text/css">
.field{
    background: #f9f9f9;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    cursor: move;
}
.field-content{
    padding: 5px;
}
.field-icon{
    width: 30px;
    height: 30px;
    background: #f1f1f1;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}
.field-name{
    font-size: 14px;
}
.draggable{
    z-index: 1;
}
.droppable{
    z-index: 0;
    width: 50%;
    height: 100%;
    float: left;
}
.droppable:nth-child(1){
    padding-right: 5px;
}
.droppable:nth-child(2){
    padding-left: 5px;
}
.active{
    background: #f1f1f1;
}
</style>
@stop

@include('layout-builder._create')

@section('page_js')
<script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

        $('.section').draggable({
            helper: 'clone',
            revert: 'invalid'
        });

        $('.draggable').draggable({
            helper: 'clone',
            revert: 'invalid',
            connectToSortable: '.droppable'
        });

        $('.section-droppable').droppable({
            activeClass: 'active',
            hoverClass: 'hover',
            accept: ":not(.ui-sortable-helper)",
            drop: function (e, ui) {
                e.preventDefault();
                e.stopPropagation();
                var p = $(this);
                
                var $el = $('<div class="card">'
                                + '<div class="card-body">'
                                + '<ul class="droppable"></ul>'
                                + '<ul class="droppable"></ul>'
                                + '</div></div>');
                
                $(this).append($el);

                $('.droppable', p).droppable({
                    activeClass: 'active',
                    hoverClass: 'hover',
                    accept: ":not(.ui-sortable-helper)",
                    drop: function (e, uii) {
                        e.preventDefault();
                        e.stopPropagation();
                        var $elb = $('<li class="field drop-item">' + uii.helper.html() + '</li>');
                        $(this).append($elb);
                    }
                });

                
            }
        }).sortable({
            items: '.drop-item',
            sort: function() {
                // gets added unintentionally by droppable interacting with sortable
                // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
                $( this ).removeClass( "active" );
            }
        });
    });
</script>
@stop