@extends('layouts.admin')

@section('title', 'Diários')

@section('content_header')
    <h5>Diários</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.diarios.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">Data</th>
                <th scope="col">Igreja</th>
                <th scope="col">Classe</th>
                <th scope="col">Professor</th>
                <th scope="col">Ações</th>
            </tr>
        </thead>
        <tbody>
        @foreach($diarios as $c)
            <tr id="row{{$c->id}}">
                <th scope="row">{{$c->id}}</th>
                <td>{{ $c->data != null ? date('d/m/Y', strtotime($c->data)) : $c->data }}</td>
                <td>{{$c->igreja->nome}}</td>
                <td>{{$c->classe->nome}}</td>
                <td>{{$c->professor->pessoa->nome}}</td>
                <td >
                    <form method="post" action="{{route('ebd.diarios.destroy',$c->id)}}" class="form-inline" >
                        <a href="{{ route('ebd.diarios.edit',$c->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>
@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.diarios.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.diarios.length <= 0){
            htmlView+= `
            <tr>
                <td colspan="4">Sem registros.</td>
            </tr>`;
        }
        for(let i = 0; i < res.diarios.length; i++){
            id = res.diarios[i].id; 
            htmlView +='<tr id="row'+id+'">';
            htmlView +='<td contenteditable class="column_name" data-column_name="first_name" data-id="'+res.diarios[i].id+'">'+res.diarios[i].id+'</td>';
            htmlView +='<td contenteditable class="column_name" data-column_name="first_name" data-id="'+res.diarios[i].id+'">'+res.diarios[i].data+'</td>';
            htmlView +='<td contenteditable class="column_name" data-column_name="first_name" data-id="'+res.diarios[i].id+'">'+res.diarios[i].igreja.nome+'</td>';
            htmlView +='<td contenteditable class="column_name" data-column_name="first_name" data-id="'+res.diarios[i].id+'">'+res.diarios[i].classe.nome+'</td>';
            htmlView += '<td contenteditable class="column_name" data-column_name="last_name" data-id="'+res.diarios[i].id+'">'+res.diarios[i].professor.pessoa.nome+'</td>';
                htmlView += '<td><button type="button" class="btn btn-warning btn-sm edit mr-3" title="Editar" id="'+res.diarios[i].id+'"><i class="fa fa-edit" style="color: white;" aria-hidden="true"></i></button>'
                            +'<button type="button" title="Deletar" class="btn btn-danger btn-sm delete" id="'+res.diarios[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.diarios.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 = 'diarios/'+id+'/edit';
        });
        $(document).on('click', '.ativar', function(){
            _token = $('input[name="_token"]').val();
            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.diarios.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){
            _token = $('input[name="_token"]').val();
            var linha = $("#"+row);
            let htmlView = '';
                id = res.diario.id; 
                htmlView +='<tr id="row'+id+'">';
                htmlView +='<td contenteditable class="column_name" data-column_name="first_name" data-id="'+res.diario.id+'">'+res.diario.id+'</td>';
                htmlView +='<td contenteditable class="column_name" data-column_name="first_name" data-id="'+res.diario.id+'">'+res.diario.data+'</td>';
                htmlView +='<td contenteditable class="column_name" data-column_name="first_name" data-id="'+res.diario.id+'">'+res.diario.igreja.nome+'</td>';
                htmlView +='<td contenteditable class="column_name" data-column_name="first_name" data-id="'+res.diario.id+'">'+res.diario.classe.nome+'</td>';
                htmlView += '<td contenteditable class="column_name" data-column_name="last_name" data-id="'+res.diario.id+'">'+res.diario.professor.nome+'</td>';
                
                if(res.diario.situacao=='Inativo'){
                    htmlView += '<td><button type="button" class="btn btn-warning btn-sm edit mr-3" title="Editar" id="'+res.diario.id+'"><i class="fa fa-edit" style="color: white;" aria-hidden="true"></i></button>'
                    +'<button type="button" class="btn btn-success btn-sm ativar mr-3" title="Ativar" id="'+res.diario.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.diario.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.diario.id+'"><i class="fa fa-edit" style="color: white;" aria-hidden="true"></i></button>'
                    +'<button type="button" class="btn btn-secondary btn-sm ativar mr-3" title="Inativar" id="'+res.diario.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.diario.id+'"><i class="fa fa-trash" aria-hidden="true"></i></button></td></tr>';

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