@extends('layouts.admin')

@section('content')
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenMax.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/utils/Draggable.min.js"></script>
    <div id="app">
        <div class="page-title">
            <div class="title_left">
                <h3>Reordonați Operațiunile și Categoriile</h3>
            </div>

            <div class="title_right">
                <div class="col-md-5 col-sm-5  form-group pull-right top_search">
                    <a href = "{{ url('admin/operations') }}" class= "btn btn-primary float-right"><span
                            class="fa fa-chevron-left"></span> Înapoi la operațiuni</a>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12 col-sm-12 ">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>Lista pe Terminal <small>Operațiuni și Categorii</small></h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <br />
                        <div ref="dataBlock" id="dataBlock" data="{{ $operations_and_categories }}"></div>
                        <div id="list" class="m-6">
                            <template v-for="(item, index) in list" :key="index">
                                <div class="item p-2">
                                    <span class="text-success">@{{ item?.position }}.</span>
                                    <div class="col-md-6 col-sm-6 listItem" :entityId="item.id"
                                        :entityType="item.is_category ? 'category' : 'operation'">@{{ item?.is_category ? 'Categorie' : 'Operațiune' }}:
                                        @{{ item?.name }}</div>
                                </div>
                            </template>
                        </div>
                        <button v-on:click="setNewItemsOrder()" class="btn btn-success m-4">Actualizează</button>
                        <form style="display: none" id="demo-form2" data-parsley-validate method="POST"
                            action="{{ route('saveOrderPosition') }}" enctype="multipart/form-data"
                            class="form-horizontal form-label-left">
                            @csrf
                            <div class="item form-group">
                                <label class="col-form-label col-md-3 col-sm-3 label-align" for="order_in_json">German
                                </label>
                                <div class="col-md-6 col-sm-6">
                                    <input type="text" id="order_in_json" name="order_in_json" v-model="orderInJson"
                                        class="form-control ">
                                </div>
                            </div>
                            <div class="ln_solid"></div>
                            <div class="item form-group">
                                <div class="col-md-6 col-sm-6 offset-md-3">
                                    <button ref="submitButton" type="submit" class="btn btn-success">Salvează </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(
            function() {
                setTimeout(() => {
                    init()
                }, 50);

                function init() {

                    createSortable("list");

                    function createSortable(selector) {
                        var sortable = document.getElementById(selector);
                        Draggable.create(sortable.children, {
                            type: "y",
                            bounds: sortable,
                            edgeResistance: 1,
                            onPress: sortablePress,
                            onDragStart: sortableDragStart,
                            onDrag: sortableDrag,
                            liveSnap: sortableSnap,
                            onDragEnd: sortableDragEnd
                        });
                    }

                    function sortablePress(event) {
                        var t = this.target,
                            i = 0,
                            child = t;

                        while (child = child.previousSibling) {
                            if (child.nodeType === 1) i++;
                        }

                        t.currentIndex = i;
                        t.currentHeight = t.offsetHeight;
                        t.kids = Array.prototype.slice.call(t.parentNode.children, 0);
                    }

                    function sortableDragStart() {
                        TweenLite.set(this.target, {
                            color: "#88CE02"
                        });
                    }

                    function sortableDrag() {

                        var t = this.target,
                            elements = t.kids.slice(0),
                            indexChange = Math.round(this.y / t.currentHeight),
                            bound1 = t.currentIndex,
                            bound2 = bound1 + indexChange;
                        if (bound1 < bound2) {
                            TweenLite.to(elements.splice(bound1 + 1, bound2 - bound1), 0.15, {
                                yPercent: -100
                            });
                            TweenLite.to(elements, 0.15, {
                                yPercent: 0
                            });
                        } else if (bound1 === bound2) {
                            elements.splice(bound1, 1);
                            TweenLite.to(elements, 0.15, {
                                yPercent: 0
                            });
                        } else {
                            TweenLite.to(elements.splice(bound2, bound1 - bound2), 0.15, {
                                yPercent: 100
                            });
                            TweenLite.to(elements, 0.15, {
                                yPercent: 0
                            });
                        }
                    }

                    function sortableSnap(y) {
                        var h = this.target.currentHeight;
                        return Math.round(y / h) * h;
                    }

                    function sortableDragEnd() {
                        var t = this.target,
                            max = t.kids.length - 1,
                            yPos = this.y || endY,
                            newIndex = Math.round(this.y / t.currentHeight);

                        newIndex += (newIndex < 0 ? -1 : 0) + t.currentIndex;
                        if (newIndex === max) {
                            t.parentNode.appendChild(t);
                        } else {
                            t.parentNode.insertBefore(t, t.kids[newIndex + 1]);
                        }
                        TweenLite.set(t.kids, {
                            yPercent: 0,
                            overwrite: "all"
                        });
                        TweenLite.set(t, {
                            y: 0,
                            color: ""
                        });
                    }
                }
            }
        )
    </script>
    <script>
        const {
            createApp
        } = Vue

        createApp({
            data() {
                return {
                    list: [],
                    order: [],
                    orderInJson: null,
                }
            },
            computed: {

            },
            methods: {
                setNewItemsOrder() {
                    let i = 0;
                    let newOrderedList = [];
                    let elements = document.getElementsByClassName("listItem");
                    for (i = 0; i < elements.length; i++) {
                        element = elements[i]
                        newOrderedList.push({
                            position: i + 1,
                            type: element.getAttribute('entityType'),
                            id: element.getAttribute('entityId'),
                        })
                    }
                    this.order = newOrderedList
                    this.orderInJson = JSON.stringify(newOrderedList)
                    setTimeout(() => {
                        this.$refs.submitButton.click();
                    }, 100)
                }
            },
            mounted() {
                this.list = JSON.parse(this.$refs.dataBlock.getAttribute('data'));
            },
            onBeforeMounted() {
                this.list = JSON.parse(this.$refs.dataBlock.getAttribute('data'));
            },
            watch: {
                list(newList, oldList) {}
            }
        }).mount('#app');
    </script>
@endsection