@extends('admin')

@section('title')
    NotaireApp -Ajouter Utilisateurs
@endsection

@section('content')
@section('menu-title')
<!-- BEGIN: Breadcrumb -->

<div class="-intro-x breadcrumb mr-auto hidden sm:flex"> <a href="{{ url('/admin') }}" class="">NotairesApp</a> <i
        data-feather="chevron-right" class="breadcrumb__icon"></i> <a href="#/" class="breadcrumb--active">Paramètre</a> </div>
<!-- END: Breadcrumb -->
@endsection
<div class="mt-5">
    <div class="intro-y col-span-12 lg:col-span-12 ">
        <div class="intro-y box p-5 my-3 grid md:grid-cols-1 lg:grid-flow-row lg:grid-cols-4 gap-2">
            <h2 class="text-lg font-medium mr-auto ">Liste Des Utilisateurs </h2>
            <div class="mx-2  mr-auto w-16 sm:w-auto sm:mt-0 sm:ml-auto md:ml-0 rounded-lg shadow-inner -lg">
                {{$list->links()}}
            </div>
            <input type="hidden" class="numrowr" value="{{Session::get('rowcountUSERS')}}">
            <div class="w-full sm:w-auto sm:mt-0 sm:ml-auto md:ml-0 mx-4 ">
                <select required class="input w-20 border-2 nb_row shadow-md" >
                    @if(Session::get('rowcountUSERS')==null)
                        <option value=""selected>10</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    @else
                        <option value="10">10</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    @endif
                </select>
            </div>
            <div class="w-full sm:w-auto mt-3 sm:mt-0 sm:ml-auto md:ml-0">
                <div class="w-56 relative text-gray-700 dark:text-gray-300">
                    <input type="text" class="input w-56 box pr-10 placeholder-theme-13 shadow-lg find" placeholder="Recherche...">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search w-4 h-4 absolute my-auto inset-y-0 mr-3 right-0"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg> 
                </div>
            </div>
        </div>
        
            <div class="intro-y col-span-12 overflow-auto lg:overflow-visible">
                <table class="table table-report -mt-2">
                    <thead>
                        <tr>
                            <th class="text-center whitespace-no-wrap">Nom-Prenom</th>
                            <th class="text-center whitespace-no-wrap">E-mail</th>
                            <th class="text-center whitespace-no-wrap">Telephone</th>
                            <th class="text-center whitespace-no-wrap">Role</th>
                            <th class="text-center whitespace-no-wrap">Action</th>
                        </tr>
                    </thead>
                    <tbody id="tbd">
                        @foreach($list as $list)
                        <tr class="intro-x">
                            <td class="text-center">{{$list->name}}</td>
                            <td class="text-center">{{$list->email}}</td>
                            <td class="text-center">{{$list->tele}}</td>

                            @if($list->role==1)
                            <td class="text-center">Super Admin</td>
                            @elseif($list->role==2)
                            <td class="text-center">Admin</td>
                            @else
                            <td class="text-center">Simple Utilisateur</td>
                            @endif

                            <td class="table-report__action w-56">
                                <div class="flex justify-center items-center">
                                    <a class="flex items-center my-3 p-3 rounded-lg hover:bg-gray-300 text-theme-6" href="javascript:;" data-toggle="modal" data-target="#delete-confirmation-modal{{$list->id}}"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 w-4 h-4 mr-1"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg> Supprimer </a>
                                    <a class="flex items-center mr-3" href="{{route('admin.GestionUtil.usersEdit',[$list->id])}}"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-square w-4 h-4 mr-1"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg> Modifier </a>
                                </div>
                            </td>
                        </tr>
                        
                        <!-- BEGIN: Delete Confirmation Modal -->
                        <div class="modal" id="delete-confirmation-modal{{$list->id}}">
                            <div class="modal__content">
                                <div class="p-5 text-center">
                                    <i data-feather="x-circle" class="w-16 h-16 text-theme-6 mx-auto mt-3"></i> 
                                    <div class="text-3xl mt-5">Êtes-vous sûr? </div>
                                    <div class="text-gray-600 mt-2">Voulez-vous vraiment supprimer ces enregistrements? Ce processus ne peut pas être annulé.</div>
                                </div>
                                <div class="px-5 pb-8 text-center">
                                    <button type="button" data-dismiss="modal" class="button w-24 border text-gray-700 mr-1">Annuler</button>
                                    <a class="button w-24 bg-theme-6 text-white" href="{{route('admin.GestionUtil.usersDelete',[$list->id])}}">Supprimer</a>
                                </div>
                            </div>
                        </div>
                        <!-- END: Delete Confirmation Modal -->
                         <!-- BEGIN: Delete Confirmation Modal -->
                         
                        @endforeach
                    </tbody>
                </table>
            </div>
          
    </div>    
</div>

<script>
        if($('.numrowr').val()!=null){
            $('.nb_row').val($('.numrowr').val());
        }

        $('.nb_row').change(function(){
            $.ajax({
                url:"{{route('admin.GestionUtil.usersList')}}",
                type:'get',
                dataTaype:'json',
                data:{nb_row:$('.nb_row').val(),},
                success:function(data){
                    console.log($('.numrowr').val());
                    location.reload();
                },
                error:function(error){
                    console.log(error);
                }
            });
        });
        
</script> 
<script>
    $(".find").bind("change paste keyup", function() {
        
        $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
        if($(this).val().length>=3){
                $.ajax({
                    data:{key:$(this).val()},
                    type:'post',
                    dataType:'json',
                    url:"{{route('search.user')}}",
                    success:function(data){
                        $( "#tbd" ).html("");
                        $.each(data,function(index,o){
                            if(o.role==1){
                                role='Super Admin';
                            }else if(o.role==2){
                                role='Admin';
                            }else if(o.role==3){
                                role='Simple Utilisatuer';
                            }
                            console.log(index,o.name);
                            id=o.id;
                            ur1l="{{route('admin.GestionUtil.usersEdit',"+id+")}}";
                            url=ur1l.replace("id",id);
                            $( "#tbd" ).append( 
                            "<tr>"
                            +"<td class='text-center'>"+o.name+" "+o.prenom+"</td>"
                            +"<td class='text-center'>"+o.email+"</td>"
                            +"<td class='text-center'>"+o.tele+"</td>"
                            +"<td class='text-center'>"+role+"</td>"
                            +"<td class='table-report__action w-56'>"
                                +"<div class='flex justify-center items-center'>"
                                    +"<a class='flex items-center my-3 p-3 rounded-lg hover:bg-gray-300 text-theme-6' href='javascript:;' data-toggle='modal' data-target='#delete-confirmation-modal"+url+"'>"
                                    +"<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' class='feather feather-trash-2 w-4 h-4 mr-1'><polyline points='3 6 5 6 21 6'></polyline><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'></path><line x1='10' y1='11' x2='10' y2='17'></line><line x1='14' y1='11' x2='14' y2='17'></line></svg> Supprimer"  
                                    +"</a>"
                                    +"<a class='flex items-center my-3 p-3 rounded-lg hover:bg-gray-300 ' href="
                                    +url+">" 
                                    +"<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check-square w-4 h-4 mr-1'><polyline points='9 11 12 14 22 4'></polyline><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'></path></svg> Modifier" 
                                    +"</a>"
                                +"</div>"
                            +"</td>"               
                            +"</tr>" 
                            );
                        });
                    },
                    error:function(error){
                        console.log(error);
                    },

                }); 
                
            }else if($(this).val().length==0){
                $.ajax({
                    data:{key:$(this).val()},
                    type:'post',
                    dataType:'json',
                    url:"{{route('search.user')}}",
                    success:function(data){
                        $( "#tbd" ).html("");
                        $.each(data,function(index,o){
                            if(o.role==1){
                                role='Super Admin';
                            }else if(o.role==2){
                                role='Admin';
                            }else if(o.role==3){
                                role='Simple Utilisatuer';
                            }
                            console.log(index,o.name);
                            id=o.id;
                            ur1l="{{route('admin.GestionUtil.usersEdit',"+id+")}}";
                            url=ur1l.replace("id",id);
                            $( "#tbd" ).append( 
                            "<tr>"
                            +"<td class='text-center'>"+o.name+" "+o.prenom+"</td>"
                            +"<td class='text-center'>"+o.email+"</td>"
                            +"<td class='text-center'>"+o.tele+"</td>"
                            +"<td class='text-center'>"+role+"</td>"
                            +"<td class='table-report__action w-56'>"
                                +"<div class='flex justify-center items-center'>"
                                    +"<a class='flex items-center my-3 p-3 rounded-lg hover:bg-gray-300 text-theme-6' href='javascript:;' data-toggle='modal' data-target='#delete-confirmation-modal"+url+"'>"
                                    +"<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' class='feather feather-trash-2 w-4 h-4 mr-1'><polyline points='3 6 5 6 21 6'></polyline><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'></path><line x1='10' y1='11' x2='10' y2='17'></line><line x1='14' y1='11' x2='14' y2='17'></line></svg> Supprimer"  
                                    +"</a>"
                                    +"<a class='flex items-center my-3 p-3 rounded-lg hover:bg-gray-300 ' href="
                                    +url+">" 
                                    +"<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check-square w-4 h-4 mr-1'><polyline points='9 11 12 14 22 4'></polyline><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'></path></svg> Modifier" 
                                    +"</a>"
                                +"</div>"
                            +"</td>"               
                            +"</tr>" 
                            );
                        });
                    },
                    error:function(error){
                        console.log(error);
                    },

                });
            }
            
        });
        
</script>
<script>
    $(document).ready(function () {
        $("#bord").attr('class', 'side-menu');
        $("#client").attr('class', 'side-menu side-menu');
        $('#propr').attr('class', 'side-menu side-menu');
        $('#dossier').attr('class','side-menu side-menu');
        $('#facture').attr('class','side-menu side-menu');
        $('#devis').attr('class','side-menu side-menu');
        $('#parametre').attr('class','side-menu side-menu--active');
    });
</script> 
@endsection