@extends('layouts.admin')

@section('title')

	Gestione primo piano

@stop

@section('content')

	<div class="row">
        <div class="col-lg-12">
            <form action="/admin/home" method="POST" id="frmHome">
                {{csrf_field()}}
                <input type="hidden" name="slide1">
                <input type="hidden" name="left1">
                <input type="hidden" name="left2">
                <input type="hidden" name="left3">
                <input type="hidden" name="right1">
                <input type="hidden" name="right2">
                <input type="hidden" name="right3">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title"></h3>
                </div>
            
                <div class="box-body">
                    @if(isset($_GET["edit"]))
                        <div class="row">
                            <div class="col-md-8">
                                <div class="row">
                                    <div class="col-md-12 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'slide1')" style="height:100px" data-zone="slide1">
                                        @if($home->slide1 != '')
                                            <h4 id="news{{$home->slide1->id}}" draggable="true" ondragstart="dragStart(event)" style="border:1px solid black;padding:10px;" order="{{date("Ymd", strtotime($home->slide1->date))}}">{{$home->slide1->title}} - {{date("d/m/Y", strtotime($home->slide1->date))}}  <a class="remove" data-x="news{{$home->slide1->id}}">(X)</a></h4>
                                        @endif
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6" style="min-height:80px">
                                        <div class="row">
                                            <div class="col-md-12 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'left1')" style="min-height:80px" data-zone="left1">
                                                Slide 1<br>
                                                @if($home->left1 != '')
                                                    <h4 id="news{{$home->left1->id}}" draggable="true" ondragstart="dragStart(event)" style="border:1px solid black;padding:10px;" order="{{date("Ymd", strtotime($home->left1->date))}}">{{$home->left1->title}}  - {{date("d/m/Y", strtotime($home->left1->date))}} <a class="remove" data-x="news{{$home->left1->id}}">(X)</a></h4></br>
                                                @endif
                                            </div>
                                            <div class="col-md-12 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'left2')" style="min-height:80px" data-zone="left2">
                                                Slide 2<br>
                                                @if($home->left2 != '')
                                                    <h4 id="news{{$home->left2->id}}" draggable="true" ondragstart="dragStart(event)" style="border:1px solid black;padding:10px;" order="{{date("Ymd", strtotime($home->left2->date))}}">{{$home->left2->title}}  - {{date("d/m/Y", strtotime($home->left2->date))}} <a class="remove" data-x="news{{$home->left2->id}}">(X)</a></h4></br>
                                                @endif
                                            </div>
                                            <div class="col-md-12 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'left3')" style="min-height:80px" data-zone="left3">
                                                Slide 3<br>
                                                @if($home->left3 != '')
                                                    <h4 id="news{{$home->left3->id}}" draggable="true" ondragstart="dragStart(event)" style="border:1px solid black;padding:10px;" order="{{date("Ymd", strtotime($home->left3->date))}}">{{$home->left3->title}}  - {{date("d/m/Y", strtotime($home->left3->date))}} <a class="remove" data-x="news{{$home->left3->id}}">(X)</a></h4></br>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6" style="min-height:80px">
                                        <div class="row">
                                            <div class="col-md-12 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'right1')" style="min-height:80px" data-zone="right1">
                                                Slide 1<br>
                                                @if($home->right1 != '')
                                                    <h4 id="news{{$home->right1->id}}" draggable="true" ondragstart="dragStart(event)" style="border:1px solid black;padding:10px;" order="{{date("Ymd", strtotime($home->right1->date))}}">{{$home->right1->title}}  - {{date("d/m/Y", strtotime($home->right1->date))}} <a class="remove" data-x="news{{$home->right1->id}}">(X)</a></h4></br>
                                                @endif
                                            </div>
                                            <div class="col-md-12 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'right2')" style="min-height:80px" data-zone="right2">
                                                Slide 2<br>
                                                @if($home->right2 != '')
                                                    <h4 id="news{{$home->right2->id}}" draggable="true" ondragstart="dragStart(event)" style="border:1px solid black;padding:10px;" order="{{date("Ymd", strtotime($home->right2->date))}}">{{$home->right2->title}}  - {{date("d/m/Y", strtotime($home->right2->date))}} <a class="remove" data-x="news{{$home->right2->id}}">(X)</a></h4></br>
                                                @endif
                                            </div>
                                            <div class="col-md-12 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'right3')" style="min-height:80px" data-zone="right3">
                                                Slide 3<br>
                                                @if($home->right3 != '')
                                                    <h4 id="news{{$home->right3->id}}" draggable="true" ondragstart="dragStart(event)" style="border:1px solid black;padding:10px;" order="{{date("Ymd", strtotime($home->right3->date))}}">{{$home->right3->title}}  - {{date("d/m/Y", strtotime($home->right3->date))}} <a class="remove" data-x="news{{$home->right3->id}}">(X)</a></h4></br>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </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("Ymd", strtotime($n->date))}}">{{$n->title}} - {{date("d/m/Y", strtotime($n->date))}}</h4>
                                    @endforeach
                                </table> 
                            </div>
                        </div>
                    @else
                        <div class="row">
                            <div class="col-md-12">
                                @if($home->slide1 != '')
                                    <h4  style="border:1px solid black;padding:10px;">{{$home->slide1->title}} </h4>
                                @endif
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6" style="min-height:80px">
                                <div class="row">
                                    <div class="col-md-4" style="min-height:80px">
                                        Slide 1<br>
                                        @if($home->left1 != '')
                                            <h4  style="border:1px solid black;padding:10px;">{{$home->left1->title}}</h4></br>
                                        @endif
                                    </div>
                                    <div class="col-md-4" style="min-height:80px">
                                        Slide 2<br>
                                        @if($home->left2 != '')
                                            <h4  style="border:1px solid black;padding:10px;">{{$home->left2->title}}</h4></br>
                                        @endif
                                    </div>
                                    <div class="col-md-4" style="min-height:80px">
                                        Slide 3<br>
                                        @if($home->left3 != '')
                                            <h4  style="border:1px solid black;padding:10px;">{{$home->left3->title}}</h4></br>
                                        @endif
                                    </div>
                                </div>
                                
                            </div>
                            <div class="col-md-6" style="min-height:80px">
                                <div class="row">
                                    <div class="col-md-4" style="min-height:80px">
                                        Slide 1<br>
                                        @if($home->right1 != '')
                                            <h4  style="border:1px solid black;padding:10px;">{{$home->right1->title}}</h4></br>
                                        @endif
                                    </div>
                                    <div class="col-md-4" style="min-height:80px">
                                        Slide 2<br>
                                        @if($home->right2 != '')
                                            <h4  style="border:1px solid black;padding:10px;">{{$home->right2->title}}</h4></br>
                                        @endif
                                    </div>
                                    <div class="col-md-4" style="min-height:80px">
                                        Slide 3<br>
                                        @if($home->right3 != '')
                                            <h4  style="border:1px solid black;padding:10px;">{{$home->right3->title}}</h4></br>
                                        @endif
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                    @endif
                </div>

                <div class="box-footer">
                    @if(isset($_GET["edit"]))
                        <input type="button" class="btn btn-success" value="SALVA" id="btSave">
                    @else
                        <a href="/admin/home?edit=1" class="btn btn-info">Modifica</a>
                    @endif
                    {!! link_to_route('home', 'Annulla', null, array('class' => 'btn btn-info')) !!}
                </div>
            </div>
            </form>

        </div>
    </div>

@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(){
            $("#layout").change(function(){
              window.location='?layout=' + this.value
            });

            $("#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);
                    }

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

            });

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

        });
        
            function dragStart (event) {
                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'))
                {
                    console.log('qua');
                    var el = $("[data-zone='" + zone + "'] > h4");
                    if (el != undefined)
                    {
                        el.find("a").remove();
                        el.appendTo("#newsList");
                        sortNews();
                    }
                    event.preventDefault();
                    event.target.innerHTML = '';
                    const data = event.dataTransfer.getData("text/plain");
                    const element = document.querySelector(`#${data}`);
                    // element.innerHTML += ' <a class="remove" data-x="' + element.id + '">(X)</a>';
                    if ( element.innerHTML.indexOf('remove') < 0) {
                        element.innerHTML += ' <a class="remove" data-x="' + element.id + '">(X)</a>';
                    }
                    event.currentTarget.style.background = 'white'
                    try {
                        event.target.appendChild(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.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