calcioa5/resources/views/sections/layout.blade.php

@extends('layouts.admin')

@section('title')

	{{$section->name}} - Layout

@stop

@section('content')

    <form action="/admin/sections/layout/{{$section->id}}" method="POST" name="frmLayout" id="frmLayout">
        {{csrf_field()}}
        <input type="hidden" name="big">
        <input type="hidden" name="small1">
        <input type="hidden" name="small2">
        <input type="hidden" name="small3">
        <input type="hidden" name="small4">
        <input type="hidden" name="small5">
        <input type="hidden" name="small6">

        <div class="row" style="padding:40px">
            <div class="row">
                
                <div class="col-md-12">
                    <div class="form-group">
                        {!! Form::label('layout', 'Layout:') !!}
                        <br>
                        @for($x=1;$x<=7;$x++)
                            <div style="padding:10px;float:left;{{@$_GET["layout"] == 'layout_' . $x || (@$_GET["layout"] == '' && $section->layout == 'layout_' . $x) ? 'background-color:red;' : ''}} " class="selImg" data-id="layout_{{$x}}">
                                <a href="#" onclick="if (confirm('Se cambi layout la posizione delle news verrà azzerata, proseguire?')) document.location.href='/{{Request::path()}}?layout=layout_{{$x}}';"><img src="/images/layout_{{$x}}.png" style="width:150px;"></a>
                            </div>
                        @endfor
                        <input name="layout" type="hidden" value="{{isset($_GET["layout"]) ? $_GET["layout"] : $section->layout}}" id="layout">
                    </div>                
                </div>
            </div>
            <div class="row">
                <br>
                <div class="col-md-8">

                    @if(@$_GET["layout"] == 'layout_1' || (@$_GET["layout"] == '' && $section->layout == 'layout_1'))

                        <div class="row">
                            <div class="col-md-12 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'big')" style="height:300px" data-zone="big">
                                @if(is_object($section->big))
                                    <h4 id="news{{$section->big->id}}" draggable="true" ondragstart="dragStart(event, 'big')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->big->date))}}">{{$section->big->title}} - {{date("d/m/Y", strtotime($section->big->date))}} <a class="remove" data-x="news{{$section->big->id}}">(X)</a></h4>
                                @endif
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'small1')" style="min-height:80px" data-zone="small1">
                                @if(is_object($section->small1))
                                    <h4 id="news{{$section->small1->id}}" draggable="true" ondragstart="dragStart(event, 'small1')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->small1->date))}}">{{$section->small1->title}} - {{date("d/m/Y", strtotime($section->small1->date))}} <a class="remove" data-x="news{{$section->small1->id}}">(X)</a></h4></br>
                                @endif
                            </div>
                            <div class="col-md-4 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'small2')" style="min-height:80px" data-zone="small2">
                                @if(is_object($section->small2))
                                    <h4 id="news{{$section->small2->id}}" draggable="true" ondragstart="dragStart(event, 'small2')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->small2->date))}}">{{$section->small2->title}} - {{date("d/m/Y", strtotime($section->small2->date))}} <a class="remove" data-x="news{{$section->small2->id}}">(X)</a></h4></br>
                                @endif
                            </div>
                            <div class="col-md-4 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'small3')" style="min-height:80px" data-zone="small3">
                                @if(is_object($section->small3))
                                    <h4 id="news{{$section->small3->id}}" draggable="true" ondragstart="dragStart(event, 'small3')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->small3->date))}}">{{$section->small3->title}} - {{date("d/m/Y", strtotime($section->small3->date))}} <a class="remove" data-x="news{{$section->small3->id}}">(X)</a></h4></br>
                                @endif
                            </div>
                        </div>

                    @endif
                    
                    @if(@$_GET["layout"] == 'layout_2' || (@$_GET["layout"] == '' && $section->layout == 'layout_2'))

                        <div class="row">
                            <div class="col-md-12 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'big')" style="height:300px" data-zone="big">
                                @if(is_object($section->big))
                                    <h4 id="news{{$section->big->id}}" draggable="true" ondragstart="dragStart(event, 'big')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->big->date))}}">{{$section->big->title}} - {{date("d/m/Y", strtotime($section->big->date))}} <a class="remove" data-x="news{{$section->big->id}}">(X)</a></h4>
                                @endif
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'small1')" style="min-height:80px" data-zone="small1">
                                @if(is_object($section->small1))
                                    <h4 id="news{{$section->small1->id}}" draggable="true" ondragstart="dragStart(event, 'small1')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->small1->date))}}">{{$section->small1->title}} - {{date("d/m/Y", strtotime($section->small1->date))}} <a class="remove" data-x="news{{$section->small1->id}}">(X)</a></h4></br>
                                @endif
                            </div>
                            <div class="col-md-4 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'small2')" style="min-height:80px" data-zone="small2">
                                @if(is_object($section->small2))
                                    <h4 id="news{{$section->small2->id}}" draggable="true" ondragstart="dragStart(event, 'small2')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->small2->date))}}">{{$section->small2->title}} - {{date("d/m/Y", strtotime($section->small2->date))}} <a class="remove" data-x="news{{$section->small2->id}}">(X)</a></h4></br>
                                @endif
                            </div>
                            <div class="col-md-4 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'small3')" style="min-height:80px" data-zone="small3">
                                @if(is_object($section->small3))
                                    <h4 id="news{{$section->small3->id}}" draggable="true" ondragstart="dragStart(event, 'small3')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->small3->date))}}">{{$section->small3->title}} - {{date("d/m/Y", strtotime($section->small3->date))}} <a class="remove" data-x="news{{$section->small3->id}}">(X)</a></h4></br>
                                @endif
                            </div>
                        </div>

                    @endif

                    @if(@$_GET["layout"] == 'layout_3' || (@$_GET["layout"] == '' && $section->layout == 'layout_3'))

                        <div class="row">
                            <div class="col-md-12 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'big')" style="height:300px" data-zone="big">
                                @if(is_object($section->big))
                                    <h4 id="news{{$section->big->id}}" draggable="true" ondragstart="dragStart(event, 'big')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->big->date))}}">{{$section->big->title}} - {{date("d/m/Y", strtotime($section->big->date))}} <a class="remove" data-x="news{{$section->big->id}}">(X)</a></h4>
                                @endif
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'small1')" style="min-height:80px" data-zone="small1">
                                @if(is_object($section->small1))
                                    <h4 id="news{{$section->small1->id}}" draggable="true" ondragstart="dragStart(event, 'small1')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->small1->date))}}">{{$section->small1->title}} - {{date("d/m/Y", strtotime($section->small1->date))}} <a class="remove" data-x="news{{$section->small1->id}}">(X)</a></h4></br>
                                @endif
                            </div>
                            <div class="col-md-6 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'small2')" style="min-height:80px" data-zone="small2">
                                @if(is_object($section->small2))
                                    <h4 id="news{{$section->small2->id}}" draggable="true" ondragstart="dragStart(event, 'small2')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->small2->date))}}">{{$section->small2->title}} - {{date("d/m/Y", strtotime($section->small2->date))}} <a class="remove" data-x="news{{$section->small2->id}}">(X)</a></h4></br>
                                @endif
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'small3')" style="min-height:80px" data-zone="small3">
                                @if(is_object($section->small3))
                                    <h4 id="news{{$section->small3->id}}" draggable="true" ondragstart="dragStart(event, 'small3')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->small3->date))}}">{{$section->small3->title}} - {{date("d/m/Y", strtotime($section->small3->date))}} <a class="remove" data-x="news{{$section->small3->id}}">(X)</a></h4></br>
                                @endif
                            </div>
                            <div class="col-md-6 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'small4')" style="min-height:80px" data-zone="small4">
                                @if(is_object($section->small4))
                                    <h4 id="news{{$section->small4->id}}" draggable="true" ondragstart="dragStart(event, 'small4')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->small4->date))}}">{{$section->small4->title}} - {{date("d/m/Y", strtotime($section->small4->date))}} <a class="remove" data-x="news{{$section->small4->id}}">(X)</a></h4></br>
                                @endif
                            </div>
                        </div>

                    @endif

                    @if(@$_GET["layout"] == 'layout_4' || (@$_GET["layout"] == '' && $section->layout == 'layout_4'))

                        <div class="row">
                            <div class="col-md-12 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'big')" style="height:300px" data-zone="big">
                                @if(is_object($section->big))
                                    <h4 id="news{{$section->big->id}}" draggable="true" ondragstart="dragStart(event, 'big')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->big->date))}}">{{$section->big->title}} - {{date("d/m/Y", strtotime($section->big->date))}} <a class="remove" data-x="news{{$section->big->id}}">(X)</a></h4>
                                @endif
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'small1')" style="min-height:80px" data-zone="small1">
                                @if(is_object($section->small1))
                                    <h4 id="news{{$section->small1->id}}" draggable="true" ondragstart="dragStart(event, 'small1')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->small1->date))}}">{{$section->small1->title}} - {{date("d/m/Y", strtotime($section->small1->date))}} <a class="remove" data-x="news{{$section->small1->id}}">(X)</a></h4></br>
                                @endif
                            </div>
                            <div class="col-md-6 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'small2')" style="min-height:80px" data-zone="small2">
                                @if(is_object($section->small2))
                                    <h4 id="news{{$section->small2->id}}" draggable="true" ondragstart="dragStart(event, 'small2')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->small2->date))}}">{{$section->small2->title}} - {{date("d/m/Y", strtotime($section->small2->date))}} <a class="remove" data-x="news{{$section->small2->id}}">(X)</a></h4></br>
                                @endif
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'small3')" style="min-height:80px" data-zone="small3">
                                @if(is_object($section->small3))
                                    <h4 id="news{{$section->small3->id}}" draggable="true" ondragstart="dragStart(event, 'small3')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->small3->date))}}">{{$section->small3->title}} - {{date("d/m/Y", strtotime($section->small3->date))}} <a class="remove" data-x="news{{$section->small3->id}}">(X)</a></h4></br>
                                @endif
                            </div>
                            <div class="col-md-6 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'small4')" style="min-height:80px" data-zone="small4">
                                @if(is_object($section->small4))
                                    <h4 id="news{{$section->small4->id}}" draggable="true" ondragstart="dragStart(event, 'small4')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->small4->date))}}">{{$section->small4->title}} - {{date("d/m/Y", strtotime($section->small4->date))}} <a class="remove" data-x="news{{$section->small4->id}}">(X)</a></h4></br>
                                @endif
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'small5')" style="min-height:80px" data-zone="small5">
                                @if(is_object($section->small5))
                                    <h4 id="news{{$section->small5->id}}" draggable="true" ondragstart="dragStart(event, 'small5')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->small5->date))}}">{{$section->small5->title}} - {{date("d/m/Y", strtotime($section->small5->date))}} <a class="remove" data-x="news{{$section->small5->id}}">(X)</a></h4></br>
                                @endif
                            </div>
                            <div class="col-md-6 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'small6')" style="min-height:80px" data-zone="small6">
                                @if(is_object($section->small6))
                                    <h4 id="news{{$section->small6->id}}" draggable="true" ondragstart="dragStart(event, 'small6')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->small6->date))}}">{{$section->small6->title}} - {{date("d/m/Y", strtotime($section->small6->date))}} <a class="remove" data-x="news{{$section->small6->id}}">(X)</a></h4></br>
                                @endif
                            </div>
                        </div>

                    @endif

                    @if(@$_GET["layout"] == 'layout_5' || (@$_GET["layout"] == '' && $section->layout == 'layout_5'))

                        <div class="row">
                            <div class="col-md-12 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'big')" style="height:300px" data-zone="big">
                                @if(is_object($section->big))
                                    <h4 id="news{{$section->big->id}}" draggable="true" ondragstart="dragStart(event, 'big')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->big->date))}}">{{$section->big->title}} - {{date("d/m/Y", strtotime($section->big->date))}} <a class="remove" data-x="news{{$section->big->id}}">(X)</a></h4>
                                @endif
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'small1')" style="min-height:80px" data-zone="small1">
                                @if(is_object($section->small1))
                                    <h4 id="news{{$section->small1->id}}" draggable="true" ondragstart="dragStart(event, 'small1')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->small1->date))}}">{{$section->small1->title}} - {{date("d/m/Y", strtotime($section->small1->date))}} <a class="remove" data-x="news{{$section->small1->id}}">(X)</a></h4></br>
                                @endif
                            </div>
                            <div class="col-md-6 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'small2')" style="min-height:80px" data-zone="small2">
                                @if(is_object($section->small2))
                                    <h4 id="news{{$section->small2->id}}" draggable="true" ondragstart="dragStart(event, 'small2')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->small2->date))}}">{{$section->small2->title}} - {{date("d/m/Y", strtotime($section->small2->date))}} <a class="remove" data-x="news{{$section->small2->id}}">(X)</a></h4></br>
                                @endif
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'small3')" style="min-height:80px" data-zone="small3">
                                @if(is_object($section->small3))
                                    <h4 id="news{{$section->small3->id}}" draggable="true" ondragstart="dragStart(event, 'small3')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->small3->date))}}">{{$section->small3->title}} - {{date("d/m/Y", strtotime($section->small3->date))}} <a class="remove" data-x="news{{$section->small3->id}}">(X)</a></h4></br>
                                @endif
                            </div>
                            <div class="col-md-6 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'small4')" style="min-height:80px" data-zone="small4">
                                @if(is_object($section->small4))
                                    <h4 id="news{{$section->small4->id}}" draggable="true" ondragstart="dragStart(event, 'small4')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->small4->date))}}">{{$section->small4->title}} - {{date("d/m/Y", strtotime($section->small4->date))}} <a class="remove" data-x="news{{$section->small4->id}}">(X)</a></h4></br>
                                @endif
                            </div>
                        </div>

                    @endif

                    @if(@$_GET["layout"] == 'layout_6' || (@$_GET["layout"] == '' && $section->layout == 'layout_6'))

                        <div class="row">
                            <div class="col-md-6 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'big')" style="height:300px" data-zone="big">
                                @if(is_object($section->big))
                                    <h4 id="news{{$section->big->id}}" draggable="true" ondragstart="dragStart(event, 'big')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->big->date))}}">{{$section->big->title}} - {{date("d/m/Y", strtotime($section->big->date))}} <a class="remove" data-x="news{{$section->big->id}}">(X)</a></h4>
                                @endif
                            </div>
                            <div class="col-md-6 ">
                                <div class="row">
                                    <div class="col-md-12 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'small1')" style="min-height:80px" data-zone="small1">
                                        @if(is_object($section->small1))
                                            <h4 id="news{{$section->small1->id}}" draggable="true" ondragstart="dragStart(event, 'small1')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->small1->date))}}">{{$section->small1->title}} - {{date("d/m/Y", strtotime($section->small1->date))}} <a class="remove" data-x="news{{$section->small1->id}}">(X)</a></h4></br>
                                        @endif
                                    </div>
                                    <div class="col-md-12 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'small2')" style="min-height:80px" data-zone="small2">
                                        @if(is_object($section->small2))
                                            <h4 id="news{{$section->small2->id}}" draggable="true" ondragstart="dragStart(event, 'small2')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->small2->date))}}">{{$section->small2->title}} - {{date("d/m/Y", strtotime($section->small2->date))}} <a class="remove" data-x="news{{$section->small2->id}}">(X)</a></h4></br>
                                        @endif
                                    </div>
                                    <div class="col-md-12 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'small3')" style="min-height:80px" data-zone="small3">
                                        @if(is_object($section->small3))
                                            <h4 id="news{{$section->small3->id}}" draggable="true" ondragstart="dragStart(event, 'small3')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->small3->date))}}">{{$section->small3->title}} - {{date("d/m/Y", strtotime($section->small3->date))}} <a class="remove" data-x="news{{$section->small3->id}}">(X)</a></h4></br>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        

                    @endif
                    
                    @if(@$_GET["layout"] == 'layout_7' || (@$_GET["layout"] == '' && $section->layout == 'layout_7'))

                        <div class="row">
                            <div class="col-md-12 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'big')" style="height:300px" data-zone="big">
                                @if(is_object($section->big))
                                    <h4 id="news{{$section->big->id}}" draggable="true" ondragstart="dragStart(event, 'big')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->big->date))}}">{{$section->big->title}} - {{date("d/m/Y", strtotime($section->big->date))}} <a class="remove" data-x="news{{$section->big->id}}">(X)</a></h4>
                                @endif
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'small1')" style="min-height:80px" data-zone="small1">
                                @if(is_object($section->small1))
                                    <h4 id="news{{$section->small1->id}}" draggable="true" ondragstart="dragStart(event, 'small1')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->small1->date))}}">{{$section->small1->title}} - {{date("d/m/Y", strtotime($section->small1->date))}} <a class="remove" data-x="news{{$section->small1->id}}">(X)</a></h4></br>
                                @endif
                            </div>
                            <div class="col-md-6 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'small2')" style="min-height:80px" data-zone="small2">
                                @if(is_object($section->small2))
                                    <h4 id="news{{$section->small2->id}}" draggable="true" ondragstart="dragStart(event, 'small2')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->small2->date))}}">{{$section->small2->title}} - {{date("d/m/Y", strtotime($section->small2->date))}} <a class="remove" data-x="news{{$section->small2->id}}">(X)</a></h4></br>
                                @endif
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'small3')" style="min-height:80px" data-zone="small3">
                                @if(is_object($section->small3))
                                    <h4 id="news{{$section->small3->id}}" draggable="true" ondragstart="dragStart(event, 'small3')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->small3->date))}}">{{$section->small3->title}} - {{date("d/m/Y", strtotime($section->small3->date))}} <a class="remove" data-x="news{{$section->small3->id}}">(X)</a></h4></br>
                                @endif
                            </div>
                            <div class="col-md-6 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'small4')" style="min-height:80px" data-zone="small4">
                                @if(is_object($section->small4))
                                    <h4 id="news{{$section->small4->id}}" draggable="true" ondragstart="dragStart(event, 'small4')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($section->small4->date))}}">{{$section->small4->title}} - {{date("d/m/Y", strtotime($section->small4->date))}} <a class="remove" data-x="news{{$section->small4->id}}">(X)</a></h4></br>
                                @endif
                            </div>
                        </div>

                    @endif

                </div>
                <div class="col-md-4"  id="newsList" style="max-height:500px;overflow-y:scroll;">
                    <input type="text" placeholder="Cerca..." id="txtSearch" onkeyup="filter(this,'newsList')">
                        @foreach($news as $n)
                            <h4 class="elements" id="news{{$n->id}}" draggable="true" ondragover="return false;" ondragstart="dragStart(event, '')" style="border:1px solid black;padding:10px;" order="{{date("YmdHis", strtotime($n->date))}}">{{$n->title}} - {{date("d/m/Y", strtotime($n->date))}}</h4>
                        @endforeach
                    </table> 
                </div>
            </div>
        </div>

        <input type="button" value="SALVA" id="btSave" class="btn btn-success">
        {!! link_to_route('sections.index', 'Annulla', null, array('class' => 'btn btn-info')) !!}

    </form>
@stop

@section('extra_css')

    <style>
        .dropBox
        {
            border:1px solid black;
            padding:20px;
            background-color:white;
        }
    </style>

@stop

@section('extra_js')

    <script type="text/javascript">

        $(function(){
            
            $("#btSave").click(function(){

                $(".dropBox").each(function(){

                    var zone = $(this).attr("data-zone");
                    
                    if ($(this).children('h4').length > 0)
                    {
                        var id = $(this).children('h4').attr("id");
                        id = id.replace("news", "");
                        $("input[name='" + zone + "']").val(id);
                    }

                });
                $("#frmLayout").submit();

            });

            $(document).on('click', '.remove', function () {
                var el = $(this).parent();
                el.children("a").eq(0).remove();

                el.removeAttr("ondragstart");
                el.attr("ondragstart", "dragStart(event, '')");
                
                el.appendTo("#newsList");
                sortNews();
            });

        });
        
            var from_zone = '';
            var from_event = '';

            function dragStart (event, zone) {
                from_zone = zone;
                from_event = event;
                // from_event.dataTransfer.setData("text/plain", event.target.id);
                event.dataTransfer.setData("text/plain", event.target.id);
              }

              function dragStartList (event) {
                from_zone = '';
                from_event = null;
                event.dataTransfer.setData("text/plain", event.target.id);
              }
              
              function allowDrop (event) {
                event.preventDefault();
                // event.currentTarget.style.background = '#7f8082';
              }
              
              function drop (event, zone) {
                  
                if($( event.target ).is('div'))
                {
                    
                    var el = $("[data-zone='" + zone + "'] > h4");
                    if (el != undefined && from_zone == '')
                    {
                        el.find("a").remove();
                        el.removeAttr("ondragstart");
                        
                        sortNews();

                        event.preventDefault();
                        event.target.innerHTML = '';
                        const data = event.dataTransfer.getData("text/plain");
                        const element = document.querySelector(`#${data}`);
                        element.removeAttribute("ondragstart");
                        element.setAttribute("ondragstart", "dragStart(event, '" + zone + "')");
                        //element.appendTo("#newsList");
                        if ( element.innerHTML.indexOf('remove') < 0) {
                            element.innerHTML += ' <a class="remove" data-x="' + element.id + '">(X)</a>';
                        }
                        //console.log(element.innerHTML);
                        //element.innerHTML = element.innerHTML.replace("dragStart(event, '')", "dragStart(event, '" + zone + "')");
                        
                        event.currentTarget.style.background = 'white'
                        try {
                            event.target.appendChild(element);
                        } catch (error) {
                            console.warn("you can't move the item to the same place")
                        }

                    }
                    else
                    {

                        var el_from = $("[data-zone='" + from_zone + "']");


                        const data = event.dataTransfer.getData("text/plain");
                        const element = document.querySelector(`#${data}`);
                        element.removeAttribute("ondragstart");
                        element.setAttribute("ondragstart", "dragStart(event, '" + zone + "')");
                        // var new_el = element.cloneNode(true);

                        var f = event.target.innerHTML;
                        f = f.replace("dragStart(event, '" + zone + "')", "dragStart(event, '" + from_zone + "')");
                        el_from.append(f);
                        
                        
                        event.target.innerHTML = '';
                        try {
                            event.target.appendChild(element);
                        
                        } catch (error) {
                            console.warn("you can't move the item to the same place")
                        }
                        /*
                        const data_bbb = event.dataTransfer.getData("text/plain");
                        const bbb_element = document.querySelector(`#${data_bbb}`);

                        const data_aaa = from_event.dataTransfer.getData("text/plain");
                        console.log(data_aaa);
                        const aaa_element = document.querySelector(`#${data_aaa}`);

                        
                        
                        event.target.innerHTML = '';
                        from_event.target.innerHTML = '';
                        try {
                            event.target.appendChild(bbb_element);
                            from_event.target.appendChild(aaa_element);
                        } catch (error) {
                            console.warn("you can't move the item to the same place")
                        }*/
  
                    }
                    
                }
                
              }
            
            $("#txtSearch").keydown(function(event) {
                if (event.keyCode == 13) {
                    event.preventDefault();
                }
            });

              function filter (element,what) {
                var value = $(element).val().toLowerCase();
                $('.elements').hide(); 
                $('.elements:contains(' + value + ')').show();
            };

            jQuery.expr[':'].contains = function(a, i, m) {
                return jQuery(a).text().toLowerCase()
                    .indexOf(m[3].toLowerCase()) >= 0;
              };

              jQuery.fn.sortElements = (function () {

                var sort = [].sort;
            
                return function (comparator, getSortable) {
            
                    getSortable = getSortable || function () {
                        return this;
                    };
            
                    var placements = this.map(function () {
            
                        var sortElement = getSortable.call(this),
                            parentNode = sortElement.parentNode,
            
                            // Since the element itself will change position, we have
                            // to have some way of storing its original position in
                            // the DOM. The easiest way is to have a 'flag' node:
                            nextSibling = parentNode.insertBefore(
                            document.createTextNode(''),
                            sortElement.nextSibling);
            
                        return function () {
            
                            if (parentNode === this) {
                                throw new Error(
                                    "You can't sort elements if any one is a descendant of another.");
                            }
            
                            // Insert before flag:
                            parentNode.insertBefore(this, nextSibling);
                            // Remove flag:
                            parentNode.removeChild(nextSibling);
            
                        };
            
                    });
            
                    return sort.call(this, comparator).each(function (i) {
                        placements[i].call(getSortable.call(this));
                    });
            
                };
            
            })();

            function sortNews()
            {
                $('#newsList > h4').sortElements(function(a, b){
                    return parseInt($(a).attr('order')) < parseInt($(b).attr('order')) ? 1 : -1;
                });
            }

    </script>



@stop