@extends('layouts.admin')

@section('title')

	{{$event->title}} - Layout

@stop

@section('content')

    <form action="/admin/events/layout/{{$event->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">

        <div class="row" style="padding:40px">
            <div class="row">
                <br>
                <div class="col-md-8">
                    
                    <div class="row">
                        <div class="col-md-12 dropBox" ondragover="allowDrop(event)" ondrop="drop(event, 'big')" style="height:300px" data-zone="big">
                            @if($event->big != '')
                                <h4 id="news{{$event->big->id}}" draggable="true" ondragstart="dragStart(event)" style="border:1px solid black;padding:10px;">{{$event->big->title}} <a class="remove" data-x="news{{$event->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($event->small1 != '')
                                <h4 id="news{{$event->small1->id}}" draggable="true" ondragstart="dragStart(event)" style="border:1px solid black;padding:10px;">{{$event->small1->title}} <a class="remove" data-x="news{{$event->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($event->small2 != '')
                                <h4 id="news{{$event->small2->id}}" draggable="true" ondragstart="dragStart(event)" style="border:1px solid black;padding:10px;">{{$event->small2->title}} <a class="remove" data-x="news{{$event->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($event->small3 != '')
                                <h4 id="news{{$event->small3->id}}" draggable="true" ondragstart="dragStart(event)" style="border:1px solid black;padding:10px;">{{$event->small3->title}} <a class="remove" data-x="news{{$event->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($event->small4 != '')
                                <h4 id="news{{$event->small4->id}}" draggable="true" ondragstart="dragStart(event)" style="border:1px solid black;padding:10px;">{{$event->small4->title}} <a class="remove" data-x="news{{$event->small4->id}}">(X)</a></h4></br>
                            @endif
                        </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;">{{$n->title}}</h4>
                        @endforeach
                    </table> 
                </div>
            </div>
        </div>

        <input type="button" value="SALVA" id="btSave" class="btn btn-success">
        <a href="{{ route('events.index') }}" class="btn btn-info">Annulla</a>

    </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.appendTo("#newsList");
            });

        });
        
            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'))
                {
                    var el = $("[data-zone='" + zone + "'] > h4");
                    if (el != undefined)
                    {
                        el.children("a").eq(0).remove();
                        el.appendTo("#newsList");
                    }
                    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>';
                    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();
                $('.elements').hide(); 
                $('.elements:contains(' + value + ')').show();
            };

    </script>



@stop