@extends('layouts.metronic')

@section('content')   
    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption font-dark">                
                <i class="fa fa-table"></i>
                <span class="caption-subject bold uppercase">Întrebări Profil</span>
            </div>            
        </div>
        <div class="portlet-body">
            <div class="table-toolbar">
                <div class="row">
                    <div class="col-md-6">
                        <div class="btn-group">
                            <a href="{{ route('profile_question.add') }}" >
                            <button id="sample_editable_1_new" class="btn sbold green"> Adaugă Întrebare
                                <i class="fa fa-plus"></i>                                
                            </button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>            

            <ul id="dragableList" class="todo-list-wrapper list-group list-group-flush">
                @php
                $i = 1
                @endphp  
                @foreach ($questions as $question)
                <li class="list-group-item dragableItem" data-order="{{$i}}" data-id="{{$question->id}}" draggable="true">
                    
                    <div class="row">
                        <div class="col-md-10">
                            <i class="fa fa-bars"></i> &nbsp;&nbsp;
                            {{ $question->text }}
                        </div>
                        <div class="col-md-1">
                            <a href="{{ route('profile_question.edit', [$question->id]) }}">
                                <button class="btn btn-sm blue">                                
                                    <i class="fa fa-edit"></i>                                
                                </button>
                            </a>
                        </div>
                        <div class="col-md-1">
                            <a class="btn btn-sm red" data-singleton="true" data-popout="true" data-placement="left" data-toggle="confirmation" data-btn-ok-label="Da" data-btn-cancel-label="Nu" data-title="Sunteți sigur ?" href="{{ route('profile_question.delete', $question->id) }}"><span class="glyphicon glyphicon-trash"></span></a>
                        </div>
                    </div>                   
                    
                </li>
                @php
                $i++;
                @endphp
                @endforeach        
            </ul>
        </div>
    </div>    
@endsection

@section('scripts')  
<script>
    var dragSrcEl = null;

    function handleDragStart(e) {
        this.style.opacity = '0.4';

        dragSrcEl = this;

        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('text/html', this.innerHTML);
    }

    function handleDragOver(e) {
        if (e.preventDefault) {
            e.preventDefault(); // Necessary. Allows us to drop.
        }

        e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.

        return false;
    }

    function handleDragEnter(e) {
        this.classList.add('over');
        this.style.opacity = '1';
    }

    function handleDragLeave(e) {
        this.classList.remove('over');  // this / e.target is previous target element.
    }

    function handleDrop(e) {
        if (e.stopPropagation) {
            e.stopPropagation(); // Stops some browsers from redirecting.
        }

        console.log(dragSrcEl.dataset.order);
        if (dragSrcEl != this) {
            // Set the source column's HTML to the HTML of the column we dropped on.
            var auxId = dragSrcEl.dataset.id;
            dragSrcEl.dataset.id = this.dataset.id;
            this.dataset.id = auxId;

            dragSrcEl.innerHTML = this.innerHTML;
            this.innerHTML = e.dataTransfer.getData('text/html');

            $.post( "/profile_question.changeOrder/" + dragSrcEl.dataset.id , { index: dragSrcEl.dataset.order, _token:"{{ csrf_token() }}"} )
                    .done(function( data ) {}
            );

            $.post( "/profile_question.changeOrder/" + this.dataset.id , { index: this.dataset.order, _token:"{{ csrf_token() }}"} )
                    .done(function( data ) {}
            );
        }

        return false;
    }

    function handleDragEnd(e) {
        // this/e.target is the source node.

        [].forEach.call(cols, function (col) {
            col.classList.remove('over');
        });
    }

    var cols = document.querySelectorAll('#dragableList .dragableItem');
    [].forEach.call(cols, function (col) {
        col.addEventListener('dragstart', handleDragStart, false);
        col.addEventListener('dragenter', handleDragEnter, false)
        col.addEventListener('dragover', handleDragOver, false);
        col.addEventListener('dragleave', handleDragLeave, false);
        col.addEventListener('drop', handleDrop, false);
        col.addEventListener('dragend', handleDragEnd, false);
    });
</script>
@endsection

@section('menuVariables')
    var menuItemName = "menuProfilQuestions";
    var submenuItemName = "";
@stop