@extends('layouts.admin')
@section('content')
<div class="card">
            <div class="d-flex flex-row px-2">
                <div class="mr-auto p-2">
                    <b><h3>Artigos</h3></b>
                </div>
                <div class="p-2">        
                    <button type="button" class="btn btn-primary" title="Adicionar" id="adicionar" onclick="window.location='{{ route("admin.artigos.create") }}'" >  
                        <i class="fa fa-plus" aria-hidden="true"></i>
                    </button>

                </div>
            </div>
    </div> 

<div class="table-responsive">
    <table class="table table-striped" id="table">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col" style="word-wrap: break-word;" width="30%">Título</th>
                <th scope="col">Tipo</th>
                <th scope="col">Presidente</th>
                <th scope="col">Situação</th>
                <th scope="col">Ações</th>
            </tr>
        </thead>
        <tbody>
        @foreach($artigos as $d)
            <tr id="row{{$d->id}}">
                <th scope="row">{{$d->id}}</th>
                <td>{{$d->titulo}}</td>
                <td>{{$d->tipo}}</td>
                <td>{{$d->presidente != 0 ? 'Sim' : 'Não' }}</td>
                <td>{{$d->status}}</td>
                <td >
                    <form method="post" action="{{route('admin.artigos.destroy',$d->id)}}" class="form-inline" >
                        <a href="{{ route('admin.artigos.edit',$d->id) }}" title="Editar" class="btn btn-warning btn-sm mr-3"><i class="fa fa-edit" style="color: white;" aria-hidden="true"></i></a>                        
                        @method('delete')
                        @csrf
                        <button type="submit" class="btn btn-danger btn-sm" title="Deletar" onclick="return confirm('Tem certeza que deseja deletar este registro?')"><i class="fa fa-trash" aria-hidden="true"></i></button>
                    </form>                
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>
</div>

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
@stop
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
<script>
jQuery(function($){    
$('#search').on('keyup', function(){
            search();
        });
        function search(){
            var keyword = $('#search').val();
            $.post('{{ route("admin.artigos.procurar") }}',
            {
                //_token: $('meta[name="csrf-token"]').attr('content'),
                _token: "{{ csrf_token() }}",
                keyword:keyword
            },
            function(data){
                table_post_row(data);
                console.log(data);
            }).fail(function(xhr, status, error) {
              console.log(error);
            });
        }
        // table row with ajax
        function table_post_row(res){
        let htmlView = '';
        if(res.artigos.length <= 0){
            htmlView+= `
            <tr>
                <td colspan="4">Sem registros.</td>
            </tr>`;
        }
        for(let i = 0; i < res.artigos.length; i++){
            id = res.artigos[i].id; 
            htmlView +='<tr id="row'+id+'">';
            htmlView +='<td contenteditable class="column_name" data-column_name="first_name" data-id="'+res.artigos[i].id+'">'+res.artigos[i].id+'</td>';
            htmlView +='<td contenteditable class="column_name" data-column_name="first_name" data-id="'+res.artigos[i].id+'">'+res.artigos[i].titulo+'</td>';
            htmlView +='<td contenteditable class="column_name" data-column_name="first_name" data-id="'+res.artigos[i].id+'">'+res.artigos[i].tipo+'</td>';
            htmlView +='<td contenteditable class="column_name" data-column_name="first_name" data-id="'+res.artigos[i].id+'">'+ ( (res.artigos[i].presidente != 0 ) ? ("Sim" ) : ("Não") )+'</td>';
            htmlView += '<td contenteditable class="column_name" data-column_name="last_name" data-id="'+res.artigos[i].id+'">'+res.artigos[i].status+'</td>';
            if(res.artigos[i].status=='Inativo'){
                htmlView += '<td><button type="button" class="btn btn-warning btn-sm edit mr-3" title="Editar" id="'+res.artigos[i].id+'"><i class="fa fa-edit" style="color: white;" aria-hidden="true"></i></button>'
                            +'<button type="button" class="btn btn-success btn-sm active mr-3" title="Ativar" id="'+res.artigos[i].id+'"><i class="fa fa-toggle-on" style="color: white;" aria-hidden="true"></i></button>'       
                            +'<button type="button" title="Deletar" class="btn btn-danger btn-sm delete" id="'+res.artigos[i].id+'"><i class="fa fa-trash" aria-hidden="true"></i></button></td></tr>';
            }else{
                htmlView += '<td><button type="button" class="btn btn-warning btn-sm edit mr-3" title="Editar" id="'+res.artigos[i].id+'"><i class="fa fa-edit" style="color: white;" aria-hidden="true"></i></button>'
                            +'<button type="button" class="btn btn-secondary btn-sm active mr-3" title="Inativar" id="'+res.artigos[i].id+'"><i class="fa fa-toggle-off" style="color: white;" aria-hidden="true"></i></button>'       
                            +'<button type="button" title="Deletar" class="btn btn-danger btn-sm delete" id="'+res.artigos[i].id+'"><i class="fa fa-trash" aria-hidden="true"></i></button></td></tr>';

            }
        }
            $('tbody').html(htmlView);
        }            

            var _token = $('input[name="_token"]').val();
        $(document).on('click', '.delete', function(){
            var parent = $(this).parent();
            var id = $(this).attr("id");
                if(confirm("Tem certeza que deseja deletar este registro?"))
                {
                $.ajax({
                    url:"{{ route('admin.artigos.deletar') }}",
                    method:"POST",
                    data:{id:id, _token:_token},
                    success:function(data)
                    {
                        parent.slideUp(300, function () {
                            parent.closest("tr").remove();
                        });                        
                        console.log('Deletado!');
                    }
                });
            }
        });
        $(document).on('click', '.edit', function(){
            var parent = $(this).parent();
            var id = $(this).attr("id");
            /*$.ajax({
                url:'departamentos/'+id+'/edit',
                method:"GET",
                success:function(data)
                {
                    console.log('open edit!');
                }
            });*/
            window.location = 'artigos/'+id+'/edit';
        });
        $(document).on('click', '.ativo', function(){
            var parent = $(this).parent();
            var id = $(this).attr("id");
            var row = 'row'+id;
                if(confirm("Tem certeza que atualizar este registro?"))
                {
                $.ajax({
                    url:"{{ route('admin.artigos.ativar') }}",
                    method:"POST",
                    data:{id:id, _token:_token},
                    success:function(data)
                    {
                        /*parent.closest("tr").remove();*/
                        update_row(data,row);                    
                        console.log('Atualizado!');
                    }
                });
            }
        });

        function update_row(res, row){
            var linha = $("#"+row);
            let htmlView = '';
                id = res.artigo.id; 
                htmlView +='<tr id="row'+id+'">';
                htmlView +='<td contenteditable class="column_name" data-column_name="first_name" data-id="'+res.artigo.id+'">'+res.artigo.id+'</td>';
                htmlView +='<td contenteditable class="column_name" data-column_name="first_name" data-id="'+res.artigo.id+'">'+res.artigo.titulo+'</td>';
                htmlView +='<td contenteditable class="column_name" data-column_name="first_name" data-id="'+res.artigo.id+'">'+res.artigo.tipo+'</td>';
                htmlView +='<td contenteditable class="column_name" data-column_name="first_name" data-id="'+res.artigo.id+'">'+ ( (res.artigo.presidente != 0 ) ? ("Sim" ) : ("Não") )+'</td>';
                htmlView += '<td contenteditable class="column_name" data-column_name="last_name" data-id="'+res.artigo.id+'">'+res.artigo.status+'</td>';
                
                if(res.artigo.status=='Inativo'){
                    htmlView += '<td><button type="button" class="btn btn-warning btn-sm edit mr-3" title="Editar" id="'+res.artigo.id+'"><i class="fa fa-edit" style="color: white;" aria-hidden="true"></i></button>'
                    +'<button type="button" class="btn btn-success btn-sm active mr-3" title="Ativar" id="'+res.artigo.id+'"><i class="fa fa-toggle-on" style="color: white;" aria-hidden="true"></i></button>'       
                    +'<button type="button" title="Deletar" class="btn btn-danger btn-sm delete" id="'+res.artigo.id+'"><i class="fa fa-trash" aria-hidden="true"></i></button></td></tr>';
                }else{
                    htmlView += '<td><button type="button" class="btn btn-warning btn-sm edit mr-3" title="Editar" id="'+res.artigo.id+'"><i class="fa fa-edit" style="color: white;" aria-hidden="true"></i></button>'
                    +'<button type="button" class="btn btn-secondary btn-sm active mr-3" title="Inativar" id="'+res.artigo.id+'"><i class="fa fa-toggle-off" style="color: white;" aria-hidden="true"></i></button>'       
                    +'<button type="button" title="Deletar" class="btn btn-danger btn-sm delete" id="'+res.artigo.id+'"><i class="fa fa-trash" aria-hidden="true"></i></button></td></tr>';

                }
                /*$('tbody').append(htmlView);*/
                linha.replaceWith(htmlView);
        }            
          });       
</script>
@endsection