@extends("layouts.master")

@section("content")
    <main class="main-wrapper" id="app">
        <div class="our_breadcrumbs">
            <div class="container">
                <nav aria-label="breadcrumb">
{{--                    <ol class="breadcrumb">--}}
{{--                        <li class="breadcrumb-item"><a href="{{route('home')}}"><i class="fa fa-home"></i> {{__('Accueil')}}</a></li>--}}
{{--                        <li class="breadcrumb-item active" aria-current="page">{{$titre}}</li>--}}
{{--                    </ol>--}}
                </nav>
            </div>
        </div>
        <div class="container">
            <div class="layout-box">
                <div class="text-right"><a href="{{route('niveaux.create')}}" class="btn btn-default">{{__('Ajouter')}} <i class="fa fa-plus"></i></a></div>
                <div class="table-responsive">
                    <table id="maintable" class="table table-striped table-hover">
                        <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">{{__('Libelle')}}</th>
                            <th scope="col" style="width:17%">{{__('Action')}}</th>
<!--                            <th style="width: 3%"></th>-->
                        </tr>
                        </thead>
                        <tbody id="sortable">
                        @foreach($niveaux as $niveau)
                            <tr id="{{$niveau->id}}" data-ordre="{{$niveau->ordre}}">
                                <td>{{$niveau->id}}</td>
                                <td>{{$niveau->libelle}}</td>
                                <td>
                                    {{--<button id="top{{$niveau->id}}" class="btn btn-fav @if($niveau->top) red @endif"  @click="updateTop({{$niveau->id}})"><i class="fa fa-heart"></i></button>
                                    <button id="pub{{$niveau->id}}" class="btn btn-active @if($niveau->pub) green @endif"  @click="updatePub({{$niveau->id}})"><i class="fa fa-check"></i></button>--}}
                                    <a href="{{ route('niveaux.edit', ['niveau' => $niveau->id,]) }}" class="btn btn-edit"><i class="fa fa-pencil"></i></a>
                                    <button class="btn btn-del"  @click="destroy({{$niveau->id}})"><i class="fa fa-trash-o"></i></button>
                                </td>
                                {{--<td class="bg-move" style="width: 3%" ><a href="#" class="btn desable"><i class="fa fa-arrows-alt fa-fw"></i></a></td>--}}
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <input type="hidden" id="_token" value="{{csrf_token()}}">
    </main>
@endsection

@section('script')
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                //id: 0,
            },
            methods:{
                updatePub: function (id) {
                    axios.get('/niveaux/pub/'+id)
                    .then(response =>{
                        data = response.data;
                        if (data.pub){
                            $('#pub'+data.id).addClass('green');
                        }else {
                            $('#pub'+data.id).removeClass('green');
                        }
                    })
                    .catch(error => {
                        console.log('error: '+error);
                    })
                },
                updateTop: function (id) {
                    axios.get('/niveaux/top/'+id)
                        .then(response =>{
                            data = response.data;
                            if (data.top){
                                $('#top'+data.id).addClass('red');
                            }else {
                                $('#top'+data.id).removeClass('red');
                            }
                        })
                        .catch(error => {
                            console.log('error: '+error);
                        })
                },
                destroy: function (id) {
                    swal({
                        title: "Confirmation de la suppression.",
                        text: "Voullez vous vraiment supprimer cet enregistrement ?",
                        icon: "warning",
                        buttons: {
                            cancel: {
                                text: "Non",
                                value: null,
                                visible: true,
                                className: "btn-success",
                                closeModal: true,
                            },
                            confirm: {
                                text: "Oui",
                                value: true,
                                visible: true,
                                className: "btn-danger",
                                closeModal: true
                            }
                        }
                    }).then(isConfirm => {
                        if (isConfirm) {
                            axios.delete('/niveaux/' + id)
                                .then(response => {
                                    data = response.data;
                                    if (data.remove) {
                                        $('#' + data.id).remove();
                                    }
                                })
                                .catch(error => {
                                    console.log('error: ' + error);
                                })
                        }
                    })
                }
            }

        });
    </script>

    {{---------------Ordre-----------}}
    <script src="{{asset('js/jquery-ui_1.12.1.js')}}"></script>
    <script>
        $( function() {
            $('#sortable').sortable({
                handle: ".bg-move",
                placeholder:  {
                    element: function(currentItem) {
                        var classname = currentItem[0].className.toLowerCase();
                        var heightval = currentItem.height();
                        var widthval = currentItem.width();
                        var tr='';
                        $(this).parent().find("thead tr th").each(function(){
                            tr = '<td> </td>'+tr;
                        });
                        return $("<tr  class='"+classname+" ' style='height:"+heightval+"px; width:"+widthval+"px; left: 0px;right: auto'>"+tr+" </tr>")[0];
                    },
                    update: function(container, p) {
                        return;
                    }
                },
                update  : function(event, ui)
                {
                    var ids = [];
                    var ordres = [];
                    var token = $('#_token').val();
                    $('tbody tr').each(function(){
                        ids.push($(this).attr("id"));
                        ordres.push($(this).data("ordre"));
                    });
                    axios.post('/niveaux/ordre',{ids: ids, ordres:ordres, _token: token})
                        .then(response => {
                            //console.log(response);
                            /*if(response.data.etat){
                                // alert('ok');
                            }*/
                        })
                        .catch(error => {
                            console.log('error: '+error);
                        })
                }
            });
        });
    </script>
@endsection