@extends('usuarios.clientes.master.layoutcliente')
@section('conteudo')
<style type="text/css">
    .flex
        {
         min-width: 100%;
        }
</style>
<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">



    <div class="container-fluid">
        <div class="page-header">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="page-header-title">
                        <i class="ik ik-help bg-blue"></i>
                        <div class="d-inline">
                            <h4>Ajuda</h4>
                            <span>email para manter contacto com a GESTDOC
                                geral@gestdoc.tech</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <nav class="breadcrumb-container" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="../index.html"><i class="ik ik-home"></i></a>
                            </li>
                            <li class="breadcrumb-item"><a href="#">sugestões</a></li>
                            <li class="breadcrumb-item active" aria-current="page">ajuda</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-md-6">
                <div class="card task-board">
                    <div class="card-header">
                        <h3>Sugestões & ajuda</h3>
                        <div class="card-header-right">
                            <ul class="list-unstyled card-option">
                                <li><i class="ik ik-chevron-left action-toggle"></i></li>
                                <li><i class="ik ik-rotate-cw reload-card" data-loading-effect="pulse"></i></li>
                                <li><i class="ik ik-minus minimize-card"></i></li>
                                <li><i class="ik ik-x close-card"></i></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body progress-task">
                        <div class="dd" data-plugin="nestable">
                            <ol class="dd-list">
                                @php  $i=1;@endphp
                                @forelse($dados as $dado)
                                    @if($dado->tipo==="sugestão" || $dado->tipo==="ajuda")
                                    <li class="dd-item" data-id="{{$i++}}">
                                        <div class="dd-handle">
                                            <h6> @php


                                                $nome=\App\Models\User::find($dado->autor)->getPessoa; @endphp
                                                {{ $nome->nome }}
                                            </h6>
                                            <p>
                                                {{$dado->menssagem}}
                                            </p>
                                            <span class="right text-right" style="font-size:8pt;color:blue;
                                            display: block;
                                            float: right;
                                            margin-right: 10px">visto</span>
                                        </div>
                                    </li>
                                    @endif
                                @empty
                                @endforelse

                            </ol>
                        </div>

                    </div>
                </div>
            </div>
          
            <!---
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h3>Completed</h3>
                        <div class="card-header-right">
                            <ul class="list-unstyled card-option">
                                <li><i class="ik ik-chevron-left action-toggle"></i></li>
                                <li><i class="ik ik-rotate-cw reload-card" data-loading-effect="pulse"></i></li>
                                <li><i class="ik ik-minus minimize-card"></i></li>
                                <li><i class="ik ik-x close-card"></i></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body completed-task">
                        <div class="dd" data-plugin="nestable">
                            <ol class="dd-list">
                                <li class="dd-item" data-id="1">
                                    <div class="dd-handle">
                                        <h6>Job title</h6>
                                        <p>If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
                                    </div>
                                </li>
                                <li class="dd-item" data-id="2">
                                    <div class="dd-handle">
                                        <h6>Event Done</h6>
                                        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical</p>
                                    </div>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            ---->
        </div>



        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4>Formulário de Sugestão e Ajuda</h4>
                    </div>
                    <div class="card-body">
                        <form name="help" method="post">
                            @csrf
                                <div class="row">
                                    <div class="col-sm-12 col-xl-6 mb-30">
                                        <div class="form-group">
                                            <label for="">Tipo</label>
                                            <select class="form-control select2" name="tipo">
                                                <option value="sugestão">sugestão</option>
                                                <option value="ajuda">ajuda</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-xl-12 mb-30">
                                        <label for="">Mensagen</label>
                                        <textarea class="form-control" name="mensagem">

                                        </textarea>
                                    </div>

                                    <div class="col-sm-12 col-xl-12 mb-30">
                                        <button type="submit" class="btn btn-success" >
                                            Enviar Mensagem
                                        </button>
                                    </div>
                                </div>
                        </form>
                    </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 type="text/javascript" src="{{url('js/locastyle.js')}}"></script>
<script src=http://localhost/mascaras/dist/jquery.mask.min.js></script>

<script>

    $(function(){

        $('form[name="help"]').submit(function(data){
            data.preventDefault();


            $.ajax({
                url:"{{ route('us.admin.cliente.Gestfuncionario.ajuda1.save') }}",
                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: 2200,
                                timerProgressBar: true,

                                });

                                Toast.fire({
                                icon: 'success',
                                title: ''+msgs.message,
                                    });

                                    $(".form-control").val("");

                                    location.reload();
                                    return false;
                    }else
                    {
                            Swal.fire({ position: 'top-end',
                                        icon: 'error',
                                        text: ''+msgs.message,
                                        })

                    }
                }
            })

        });

    });
</script>


@endsection