@extends('layouts.admin')

@section('title', 'Departamentos')

@section('content_header')
    <h5>Departamentos</h5>
@stop

@section('content')
<div class="card">
    <div class="card-body">
        <div class="d-flex flex-row px-2">
            <div class="mr-auto p-2">
                <form action="" method="POST" class="form-inline">      
                    <input type="hidden" name="_token" value="{{ csrf_token() }}"></input>
                    <input type="text" class="form-control"   placeholder="Digite um texto para filtrar a tabela" id="search">
                            <span class="input-group-text" id="basic-addon1">
                                <i class="fa fa-search" aria-hidden="true"></i>
                            </span>
                    </input>        
                </form>
            </div>
            <div class="p-2">        
                <button type="button" class="btn btn-primary" title="Adicionar" id="adicionar" onclick="window.location='{{ route("ebd.departamentos.create") }}'" >  
                    <i class="fa fa-plus" aria-hidden="true"></i>
                </button>

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

<div class="table-responsive">
    <table class="table table-striped">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Nome</th>
                <th scope="col">Situação</th>
                <th scope="col">Ações</th>
            </tr>
        </thead>
        <tbody>
        @foreach($departamentos as $d)
            <tr id="row{{$d->id}}">
                <th scope="row">{{$d->id}}</th>
                <td>{{$d->nome}}</td>
                <td>{{$d->situacao}}</td>
                <td >
                    <form method="post" action="{{route('ebd.departamentos.destroy',$d->id)}}" class="form-inline" >
                        <a href="{{ route('ebd.departamentos.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>                        
                        @if($d->situacao=='Ativo')
                        <button type="button" title="Inativar" id="{{$d->id}}" class="btn btn-secondary btn-sm mr-3 active"><i class="fa fa-toggle-off" style="color: white;" aria-hidden="true"></i></a>                        
                        @endif
                        @if($d->situacao=='Inativo')
                        <button type="button" title="Ativar" id="{{$d->id}}" class="btn btn-success btn-sm mr-3 active"><i class="fa fa-toggle-on" style="color: white;" aria-hidden="true"></i></a>                        
                        @endif                        
                        @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>
@stop
    <link rel="stylesheet" href="/css/admin_custom.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script> console.log('Hi!'); </script>
    <script>
     
        $('#search').on('keyup', function(){
            search();
        });
        function search(){
            var keyword = $('#search').val();
            $.post('{{ route("ebd.departamentos.procurar") }}',
            {
                _token: $('meta[name="csrf-token"]').attr('content'),
                keyword:keyword
            },
            function(data){
                table_post_row(data);
                console.log(data);
            });
        }
        // table row with ajax
        function table_post_row(res){
        let htmlView = '';
        if(res.departamentos.length <= 0){
            htmlView+= `
            <tr>
                <td colspan="4">Sem registros.</td>
            </tr>`;
        }
        for(let i = 0; i < res.departamentos.length; i++){
            id = res.departamentos[i].id; 
            htmlView +='<tr id="row'+id+'">';
            htmlView +='<td contenteditable class="column_name" data-column_name="first_name" data-id="'+res.departamentos[i].id+'">'+res.departamentos[i].id+'</td>';
            htmlView +='<td contenteditable class="column_name" data-column_name="first_name" data-id="'+res.departamentos[i].id+'">'+res.departamentos[i].nome+'</td>';
            htmlView += '<td contenteditable class="column_name" data-column_name="last_name" data-id="'+res.departamentos[i].id+'">'+res.departamentos[i].situacao+'</td>';
            if(res.departamentos[i].situacao=='Inativo'){
                htmlView += '<td><button type="button" class="btn btn-warning btn-sm edit mr-3" title="Editar" id="'+res.departamentos[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.departamentos[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.departamentos[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.departamentos[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.departamentos[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.departamentos[i].id+'"><i class="fa fa-trash" aria-hidden="true"></i></button></td></tr>';

            }
        }
            $('tbody').html(htmlView);
        }
        
        </script>  
        <script>
        var _token = $('input[name="_token"]').val();
        
        $(document).on('click', '.delete', function(){
            _token = $('input[name="_token"]').val();
            var parent = $(this).parent();
            var id = $(this).attr("id");
                if(confirm("Tem certeza que deseja deletar este registro?"))
                {
                $.ajax({
                    url:"{{ route('ebd.departamentos.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(){
            _token = $('input[name="_token"]').val();
            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 = 'departamentos/'+id+'/edit';
        });
        $(document).on('click', '.active', function(){
            _token = $('input[name="_token"]').val();
            console.log(_token);

            var parent = $(this).parent();
            var id = $(this).attr("id");
            var row = 'row'+id;
                if(confirm("Tem certeza que atualizar este registro?"))
                {
                $.ajax({
                    url:"{{ route('ebd.departamentos.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.departamento.id; 
                htmlView +='<tr id="row'+id+'">';
                htmlView +='<td contenteditable class="column_name" data-column_name="first_name" data-id="'+res.departamento.id+'">'+res.departamento.id+'</td>';
                htmlView +='<td contenteditable class="column_name" data-column_name="first_name" data-id="'+res.departamento.id+'">'+res.departamento.nome+'</td>';
                htmlView += '<td contenteditable class="column_name" data-column_name="last_name" data-id="'+res.departamento.id+'">'+res.departamento.situacao+'</td>';
                
                if(res.departamento.situacao=='Inativo'){
                    htmlView += '<td><button type="button" class="btn btn-warning btn-sm edit mr-3" title="Editar" id="'+res.departamento.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.departamento.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.departamento.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.departamento.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.departamento.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.departamento.id+'"><i class="fa fa-trash" aria-hidden="true"></i></button></td></tr>';

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