@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('users.create',['role_id' =>$role_id ?? 4])}}" 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>Image</th>
                            <th scope="col">Nom</th>
                            <th scope="col">Login</th>
                            <th scope="col">Email</th>
                            <th scope="col">Role</th>
                            <th scope="col" style="width:17%">Action</th>
                            <th style="width: 3%"></th>
                        </tr>
                        </thead>
                        <tbody id="sortable">
                        @foreach($users as $user)
                            <tr id="{{$user->id}}" data-ordre="{{$user->ordre}}">
                                <th scope="row">{{$user->id}}</th>
                                <td>{!! getImage($user->photo) !!}</td>
                                <td>{{$user->name}} {{$user->prenom}}</td>
                                <td>{{$user->login}}</td>
                                <td>{{$user->email}}</td>
                                <td>{{$user->roles->first()->name ?? null}}</td>
                                <td>
                                    <button id="top{{$user->id}}" class="btn btn-fav @if($user->top) red @endif"  @click="updateTop({{$user->id}})"><i class="fa fa-heart"></i></button>
                                    <button id="pub{{$user->id}}" class="btn btn-active @if($user->pub) green @endif"  @click="updatePub({{$user->id}})"><i class="fa fa-check"></i></button>
                                    <a href="{{ route('users.edit', ['user' => $user->id,]) }}" class="btn btn-edit"><i class="fa fa-pencil"></i></a>
                                    <button class="btn btn-del"  @click="destroy({{$user->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('/users/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('/users/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('/users/' + 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('/users/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