@extends('usuarios.clientes.master.layoutcliente')
@section('conteudo')
<script src="{{asset('js/jquery.dataTables.min.js') }}"></script>
{{-- SELECT STYLE --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">

@php $i=1;@endphp

<script>
    
    function precherCampo(valor_id)
    {
        
        
        var valor=valor_id.id
       var  valor_irmao="";
        var valor_irmao2=""
        //nome do input categoria 
        valor_irmao=$("#"+valor).next().val();
        //segundo input categoria
        valor_irmao2=$("#"+valor+"").next().next().val();

        //id criptografado
        console.log(valor)
        console.log(valor_irmao)
        console.log(valor_irmao2)
        $(".idCliente_edit").val(valor_irmao)
        $(".catergoriaCliente_edit").val(valor_irmao2)
    }
</script>



    <div class="container-fluid">
        <div class="page-header" width="100%">
            <div class="row align-items-end">
                <div class="col-lg-6">
                    <div class="page-header-title">
                        <div class="">
                            <div class="card-body">
                                <a data-toggle="modal" href="#demoModal"><i class="ik ik-plus bg-blue"></i><h4>Novo</h4></a>
                            </div>

                            <div class="d-inline">
                        
                            
                            </div>
                            <div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="demoModalLabel" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="demoModalLabel">Cadastrar Categoria</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        </div>
                                        <div class="modal-body">
                                        
                                                        <form class="forms-sample"  name="cadPermissao" metho="post">
                                                            @csrf
                                                            <div class="form-group">
                                                                <label for="exampleInputUsername1">Categoria/Função</label>
                                                                <input type="text" name="catergoriaCliente" class="form-control" id="exampleInputUsername1" placeholder="Cadastrar Funcionario">
                                                            </div>
                                                    
                                                                <button type="submit" class="btn btn-primary mr-2" id="meuJoin">salvar</button>   
                                                         </form>
                    
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            
                            
                            
                            
                            
                               <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="demoModalLabel">Editar Categoria</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        </div>
                                        <div class="modal-body">
                                        
                                                        <form class="forms-sample"  name="editPermissao" metho="post">
                                                            @csrf
                                                            <div class="form-group">
                                                                <label for="exampleInputUsername1">Categoria/Função</label>
                                                                <input type="text" name="catergoriaCliente_edit"  class="form-control catergoriaCliente_edit" id="exampleInputUsername1" >
                                                                <input type="text" name="idCliente_edit"  class="form-control idCliente_edit" id="idCliente_edit" hidden >
                                                                
                                                            </div>
                                                    
                                                                <button type="submit" class="btn btn-primary mr-2">Editar</button>   
                                                         </form>
                    
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            
                            
                       </div>


                    </div>



                </div>
            </div>

        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body"> 
                        <div class="table-responsive">
                                    <table id="example1" class="table container  table-striped table-hover">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Categoria</th>
                                                <th>Acçao</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                                @if(isset($categorias))
                                                @foreach($categorias as $categoria)
                                            <tr>
                                                <td>{{$i++}}</td>
                                                <td>{{$categoria->categoriacliente}}</td>
                                                @php
                                                    
                                                         try {
                                             
                                                        $decrypted =Crypt::encryptString($categoria->id);
                                                         
                                                        } catch (DecryptException $e) {
                                                            $decrypted=0;
                                                        }
                                                
                                                @endphp
                                                <td><a data-toggle="modal" href="#editModal" class="chavevalor{{$i}}" id="chavevalor{{$i}}" onclick="precherCampo(this)">
                                                     <i class="ik ik-edit bg-blue"></i>Editar</a>
                                                     <input value="{{$decrypted}}" hidden class="d-none">
                                                    <input value="{{$categoria->categoriacliente}}" hidden class="d-none">
                                                </td>
                                               
                                            </tr>
                                            @endforeach
                                            @endif
                                            </tbody>
                                        
                                        <tfoot></tfoot>
                                    </table>
                            
                    
                        </div>
                    </div>
                </div>
            </div>
        
        </div>
        
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/i18n/defaults-*.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>

<script>
 
    $(function () {
        $("#example1").DataTable();
        $('#example2').DataTable({
            "paging": true,
            "lengthChange": false,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": false,
        });
    });
    </script>

    <script>
            $(function () {
                $("#tabela").DataTable();
                $('#example2').DataTable({
                    "paging": true,
                    "lengthChange": false,
                    "searching": false,
                    "ordering": true,
                    "info": true,
                    "autoWidth": true,
                });
            });

  </script>

<script type="text/javascript">
    $(function () {
        $('form[name="cadPermissao"]').submit(function (data) {
            data.preventDefault();
            $("#meuJoin").hide();
            $.ajax({
                url: "{{route('us.admin.cliente.GestFuncao.funcao.store')}}",
                type: "post",
                data: $(this).serialize(),
                dataType: 'json',
                success: function (msgs) {
    
                    if (msgs.success === true) {
                        const Toast = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 1500,
                            timerProgressBar: true,
                        
                            });

                            Toast.fire({
                            icon: 'success',
                            title: ''+msgs.message,
                                });
                       window.location.href = "{{route('us.admin.cliente.GestFuncao.funcao.index')}}";
    
                    } else {
                        Swal.fire({ position: 'top-end',
                                    icon: 'error',
                                    text: ''+msgs.message,
                                    })
                         $("#meuJoin").show();
                        //$('.messagebox').removeClass('d-none').html(msgs.message);
                        //alert(msgs.message);
                    }
                    console.log(msgs);
    
                }
    
            });
    
        });
        
        $('form[name="editPermissao"]').submit(function (data) {
            data.preventDefault();
    
            $.ajax({
                url: "{{route('us.admin.cliente.GestFuncao.funcao.editando')}}",
                type: "post",
                data: $(this).serialize(),
                dataType: 'json',
                success: function (msgs) {
    
                    if (msgs.success === true) {
                        const Toast = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 1500,
                            timerProgressBar: true,
                        
                            });

                            Toast.fire({
                            icon: 'success',
                            title: ''+msgs.message,
                                });
                       window.location.href = "{{route('us.admin.cliente.GestFuncao.funcao.index')}}";
    
                    } else {
                        Swal.fire({ position: 'top-end',
                                    icon: 'error',
                                    text: ''+msgs.message,
                                    })
                        //$('.messagebox').removeClass('d-none').html(msgs.message);
                        //alert(msgs.message);
                    }
                    console.log(msgs);
    
                }
    
            });
    
        });
        
   
        
    });
    

    
    </script>

@endsection