<?php $__env->startSection('scripts'); ?>
    <script src="<?php echo e(URL::asset('js/views/cadastro/tarefa.js')); ?>"></script>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('pagina'); ?>
    

<div class="content-wrapper">
    <input type="hidden" id="hdnUsuario" name="usuario" data="<?php echo e(Auth::user()->getId()); ?>"/>
    <input type="hidden" id="hdnUnidade" name="unidade" data="<?php echo e(Auth::user()->getUnidade()); ?>"/>
    <div class="container-fluid mt-2">
        <?php if(session('mensagem')): ?>
            <?php if(session('mensagem')): ?>
                <div id="mensagem" class=" card-body alert alert-success text-center">
                    <i><?php echo e(session('mensagem')); ?></i>
                </div>
            <?php endif; ?>
        <?php elseif(session('exclusao')): ?>
            <?php if(session('exclusao')): ?>
                <div id="exclusao" class=" card-body alert alert-danger text-center">
                    <i><?php echo e(session('exclusao')); ?></i>
                </div>
            <?php endif; ?>
        <?php endif; ?>
<!--         <div id="filtro" class="card mt-2" style="display: none; background-color:#fff; color:#056367; border-radius: 20px 0px 20px 0px;">
            <div class="card-body">
                <div class="row"  style="padding-right: 2px;">
                    <div class="col col-sm-4 col-12 text-left">
                        <label for="cbUsuarioPesq" class="col-form-label text-md-left">Usuário</label>
                        <br/>
                        <select id="cbUsuarioPesq" class="form-control">
                            
                        </select>
                    </div>
                    
                    <div class="col col-sm-8 col-12 text-right">
                        <label for="btnPesquisar" class="col-form-label text-md-left">&nbsp;</label>
                        <br/>
                        <button id="btnPesquisar" type="button" class="btn btn-outline-secondary" aria-label="Left Align" >
                            <i class="fas fa-search"></i> Pesquisar
                        </button>
                    </div>
                </div>
            </div>
        </div> -->
        
        <div id="cadastro" class="card mt-2" style="display: none; background-color:#fff; color:#056367; border-radius: 20px 0px 20px 0px;">
            <form method="POST" action="<?php echo e(route('cadastro.tarefa.salvar')); ?>">
            <?php echo csrf_field(); ?>
            <input type="hidden" id="hdnId" name="id" data=""/>
            
            <div class="card-body">
                <div class="row" style="padding-right: 2px;">
                    <div class="col-md-6">
                        <h4 style="color:#056367;"><i class="fas fa-tasks"></i> Tarefas</h4>
                    </div>
                    <div class="col-md-6">
                        <div class="col text-right">
                            <button id="btnVoltar" type="button" class="btn btn-outline-secondary" aria-label="Left Align" >
                                <i class="fas fa-arrow-left"></i> Voltar
                            </button>

                            <button id="btnSalvar" type="submit" class="btn btn-success" aria-label="Left Align" >
                            <i class="far fa-save"></i> Salvar
                            </button>
                            
                            <button id="btnExcluir" type="button" data="" class="btn btn-outline-danger" aria-label="Left Align" >
                                <i class="fas fa-trash-alt"></i> Excluir
                            </button>
                            
                        </div>
                    </div>
                    
                </div>
                <hr></hr>
                <div class="row" >
                    <div class="col col-md-5 col-12">
                        <label for="cbUsuario" class="col-form-label text-md-left">Usuário</label>
                        <br/>
                        <select id="cbUsuario" class="form-control" name="idusuario" required>
                            
                        </select>
                    </div>
                    <div class="col col-md-2 col-12">
                        <label id="txtData_label" for="txtData"  class="col-form-label text-md-left">Data Prevista</label>
                        <input id="txtData" class="form-control" name="data_prev" type="text" onKeyUp="mascara_data(this)" maxlength="10" value="" required/>
                    </div>
                    <div class="col col-md-3 col-12">
                        <label for="cbEtapa" class="col-form-label text-md-left">Etapa</label>
                        <br/>
                        <select id="cbEtapa" class="form-control" name="etapa" required>
                            <option value="A">A FAZER</option>
                            <option value="F">FAZENDO</option>
                            <option value="R">FEITO</option>
                        </select>
                    </div>
                </div>
                <div class="row" >
                    <div class="col col-md-10 col-12">
                        <label id="txtTitulo_label" for="txtTitulo"  class="col-form-label text-md-left">Título</label>
                        <input id="txtTitulo" class="form-control" name="titulo" type="text" maxlength="50" value="" required/>
                    </div>
                </div>
                <div class="row" >
                    <div class="col col-md-10 col-12">
                        <label id="txtDescricao_label" for="txtDescricao"  class="col-form-label text-md-left">Descrição</label>
                        <textarea id="txtDescricao" class="form-control" rows = "3" name = "descricao" value="" maxlength="2000"></textarea>
                    </div>
                </div>
                
            </div>
            </form>
        </div>

        <div id="lista">
            <div class="card mt-2" style="background-color:#fff; color:#056367; border-radius: 20px 0px 20px 0px;">
                <div class="card-body">
                    <div class="row" style="padding-bottom: 5px; padding-right: 2px;">
                        <div class="col-md-6">
                            <h4 style="color:#056367;"><i class="fas fa-tasks"></i> Tarefas</h4>
                        </div>
                        <div class="col-md-6 text-right">
                            <!-- <button id="btnFiltro" type="button" class="btn btn-outline-secondary" aria-label="Left Align" >
                                <i class="fas fa-filter"></i> Filtro
                            </button> -->
                            <button id="btnNovo" type="button" class="btn btn-outline-primary" aria-label="Left Align" >
                                <i class="fas fa-plus-circle"></i> Nova Tarefa
                            </button>
                        </div>
                        
                    </div>

                </div>
            </div>

            <div class="row" >
                
                <div class="col-lg-4 col-12">
                    <div class="card  bg-default" style="background-color:#ffffb3; color:#056367; border-radius: 0px 0px 20px 0px;">
                        <div class="container">
                            <table id="tbFazer" class="table table-striped table-bordered text-left mt-2" style="background-color:#fff; color:#056367;">
                                <thead  style="background-color:#404040; color: #ccc; font-weight: bold;">
                                    <tr>
                                        <th><i class="fas fa-clock"></i> A FAZER</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody id="addTarefaFazer" ondrop="dropFazer(event)" ondragover="allowDrop(event)">
                                    

                                </tbody>
                            </table>
                            <br>
                        </div>
                    </div>
                </div> 

                <div class="col-lg-4 col-12">
                    <div class="card  bg-default" style="background-color:#d6f5f5; color:#056367; border-radius: 0px 0px 20px 0px;">
                        <div class="container">
                            <table id="tbFazendo" class="table table-striped table-bordered text-left mt-2" style="background-color:#fff; color:#056367;">
                                <thead  style="background-color:#404040; color: #ccc; font-weight: bold;">
                                    <tr>
                                        <th><i class="fas fa-running"></i> FAZENDO</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody id="addTarefaFazendo" ondrop="dropFazendo(event)" ondragover="allowDrop(event)">
                                    

                                </tbody>
                            </table>
                            <br>
                        </div>
                    </div>
                </div> 

                <div class="col-lg-4 col-12">
                    <div class="card  bg-default" style="background-color:#e6ffe6; color:#056367; border-radius: 0px 0px 20px 0px;">
                        <div class="container">
                            <table id="tbFeito" class="table table-striped table-bordered text-left mt-2" style="background-color:#fff; color:#056367;">
                                <thead  style="background-color:#404040; color: #ccc; font-weight: bold;">
                                    <tr>
                                        <th><i class="fas fa-check"></i> FEITO</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody id="addTarefaFeito" ondrop="dropFeito(event)" ondragover="allowDrop(event)">
                                    

                                </tbody>
                            </table>
                            <br>
                        </div>
                    </div>
                </div> 


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

<script>

    function mascara_data(campo) {
        if (campo.value.length == 2) {
            campo.value += '/';
        }
        if (campo.value.length == 5) {
            campo.value += '/';
        }
    }
    function drag(ev){
        ev.dataTransfer.setData("text", ev.target.id);
    }
    function dropFazer(ev){
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        document.getElementById("addTarefaFazer").appendChild(document.getElementById(data));

        $.ajaxSetup({headers:{'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
        $.ajax(
        {
            url: 'ajax-alterar-status',
            method: 'post',
            data:{
                id: data,
                etapa: 'A'
            },
            beforeSend: function(){},
            complete: function(){},
            success: function()
            {
                
            },
            error:function(error)
            {
                console.log(error);
                MensagemBox('erro','Erro',(error.responseJSON.exception != null && error.responseJSON.exception != '' ?  error.responseJSON.exception : error.responseJSON));
            }
        });
    }
    function dropFazendo(ev){
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        document.getElementById("addTarefaFazendo").appendChild(document.getElementById(data));

        $.ajaxSetup({headers:{'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
        $.ajax(
        {
            url: 'ajax-alterar-status',
            method: 'POST',
            data:{
                id: data,
                etapa: 'F'
            },
            beforeSend: function(){},
            complete: function(){},
            success: function()
            {
                
            },
            error:function(error)
            {
                console.log(error);
                MensagemBox('erro','Erro',(error.responseJSON.exception != null && error.responseJSON.exception != '' ?  error.responseJSON.exception : error.responseJSON));
            }
        });
    }
    function dropFeito(ev){
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        document.getElementById("addTarefaFeito").appendChild(document.getElementById(data));

        $.ajaxSetup({headers:{'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
        $.ajax(
        {
            url: 'ajax-alterar-status',
            method: 'POST',
            data:{
                id: data,
                etapa: 'R'
            },
            beforeSend: function(){},
            complete: function(){},
            success: function()
            {
                
            },
            error:function(error)
            {
                console.log(error);
                MensagemBox('erro','Erro',(error.responseJSON.exception != null && error.responseJSON.exception != '' ?  error.responseJSON.exception : error.responseJSON));
            }
        });
    }
    function allowDrop(ev){
        ev.preventDefault();
    }
</script>


    <?php echo $__env->make('partials._modal_delete',
    [
        'rota'=>'cadastro.tarefa.delete',
        'titulo'=>'Confirma Exclusão',
        'mensagem_delete'=>'Tem certeza que deseja excluir a Tarefa'
    ], \Illuminate\Support\Arr::except(get_defined_vars(), array('__data', '__path')))->render(); ?>

<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), array('__data', '__path')))->render(); ?>