@extends('layout.layout')

@section('section')

    <link rel='stylesheet' href='/css/aviso/listar_aviso.css?v=2'>

    <input type="hidden" id="id_user" value="{{ Auth::user()->id }}">

    @if(Session::has('mensagem_sucesso'))
        <script>
            Swal.fire(
                'Sucesso!',
                '{{ Session::get('mensagem_sucesso') }}',
                'success'
            )
        </script>
    @endif

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <button class="btn btn-info" data-toggle="modal" data-target="#modalCriarAviso">Criar Aviso</button>

                <h4 class="titulo_tabela">
                    AVISOS
                </h4>
                <div class="col-md-12 col-sm-12 div-select-pesquisa">
                    <div class="form-group col-md-8">
                        <select id="colaborador" class="form-control" name="colaborador"
                                style="display: block;">
                            <option value="0000" selected>Todos</option>
                            @foreach($colaboradores as $c)
                                <option value="{{$c->id}}">{{$c->nome}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group col-md-12">
                        <form id="form-pesquisa" action=""
                              style="display: flex; align-items: center;">
                            <input id="input-pesquisa" type="text" placeholder="Pesquisar" class="form-control"
                                   name="pesquisa">

                            <button id="btn-pesquisa" type="submit" class="btn btn-info">
                                Ir
                            </button>
                        </form>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table- table-striped table-hover">
                        <thead>
                        <th class="center td-assunto-tabela-avisos">Assunto</th>
                        <th class="center">Mensagem</th>
                        <th class="center">Tipo</th>
                        <th class="center">Colaborador</th>
                        <th class="center td-data-tabela-avisos">Data Início</th>
                        <th class="center td-data-tabela-avisos">Data Fim</th>
                        <th class="center">Status</th>
                        <th class="center">Ações</th>
                        </thead>
                        <tbody class="tbody_avisos">

                        </tbody>
                    </table>
                    <div class="col-sm-12">
                        <div align="center" id="loading-class"
                             class="lds-css ng-scope"
                             style="display: none;">
                            <div class="lds-spinner" style="width:100%;height:100%">
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row center">
                    <div class="col-sm-12" id="paginacao">

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


    {{--Modal--}}
    <div class="">
        <div class="">
            <!-- Modal -->
            <div class="modal fade" id="modalMensagemCompleta" tabindex="-1" role="dialog"
                 aria-labelledby="TituloModalCentralizado" aria-hidden="true">
                <div class="modal-dialog modal-dialog-xs" role="document">
                    <div class="modal-content" id="content-modal">
                        <div class="modal-header" id="header-modal">
                            <h3 class="modal-title" id="tituloMensagemCompleta"></h3>
                        </div>
                        <div class="modal-body">
                            <div class="container">
                                <div class="row">
                                    <div class="col-xs-12 col-sm-12 descricao-modal" id="descricaoMensagemCompleta">


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

                        <div class="modal-footer">
                            <button type="button" class="btn btn-info" data-dismiss="modal">Fechar
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    {{--Modal Visualizar Aviso--}}
    <div class="">
        <div class="">
            <!-- Modal -->
            <div class="modal fade" id="modalVisualizar" tabindex="-1" role="dialog"
                 aria-labelledby="TituloModalCentralizado" aria-hidden="true">
                <div class="container">
                    <div class="modal-dialog modal-dialog-xs" role="document">
                        <div class="modal-content" id="content-modal">
                            <div class="modal-header center" id="header-modal">
                                <h3 class="modal-title" id="tituloVisualizar">VISUALIZAR AVISO</h3>
                            </div>
                            <div class="modal-body">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-12 descricao-modal" id="descricaoVisualizar">
                                            <h5>Assunto: </h5>
                                            <p class="assunto_visualizar_aviso pzinho_visualizar_aviso">...</p>
                                            <h5>Mensagem: </h5>
                                            <p class="mensagem_visualizar_aviso pzinho_visualizar_aviso">...</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-info" data-dismiss="modal">Fechar
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    {{-- Modal Criar Aviso--}}
    <div class="">
        <div class="">
            <!-- Modal -->
            <div class="modal fade" id="modalCriarAviso" tabindex="-1" role="dialog"
                 aria-labelledby="TituloModalCentralizado" aria-hidden="true">
                <div class="container">
                    <div class="modal-dialog modal-dialog-xs" role="document">
                        <div class="modal-content" id="content-modal">
                            <div class="modal-header center" id="header-modal">
                                <h3 class="modal-title" id="tituloCriarAviso">CRIAR AVISO</h3>
                            </div>
                            <div class="modal-body">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-12 descricao-modal" id="descricaoCriarAviso">
                                            <div class="col-md-12 col-sm-12">
                                                <form method="POST" action="/registrar_aviso"
                                                      id="form_registrar_aviso">
                                                    <div class="modal-body">
                                                        <div class="container">
                                                            <div class="row">
                                                                <div class="col-xs-12 col-sm-12 descricao-modal">
                                                                    @csrf
                                                                    <div class="form-group row">
                                                                        <input id="assunto" type="text"
                                                                               placeholder="Assunto"
                                                                               class="form-control @error('assunto') is-invalid @enderror"
                                                                               name="assunto" max="255" required
                                                                               autofocus>

                                                                        @error('assunto')
                                                                        <span class="invalid-feedback" role="alert">
                                                                            <strong>{{ $message }}</strong>
                                                                        </span>
                                                                        <script>
                                                                            $('#modalCriarAviso').modal('show');
                                                                        </script>
                                                                        @enderror
                                                                    </div>

                                                                    <div class="form-group row">
                                                                    <textarea id="mensagem" placeholder="Mensagem"
                                                                              class="form-control
                                                                               @error('mensagem') is-invalid @enderror"
                                                                              maxlength="1000"
                                                                              name="mensagem" required
                                                                              autofocus></textarea>

                                                                        @error('mensagem')
                                                                        <span class="invalid-feedback" role="alert">
                                                                            <strong>{{ $message }}</strong>
                                                                        </span>
                                                                        <script>
                                                                            $('#modalCriarAviso').modal('show');
                                                                        </script>
                                                                        @enderror
                                                                    </div>

                                                                    <div class="form-group row">
                                                                        <select id="tipo" style="height: 100%;"
                                                                                name="tipo" class="form-control">
                                                                            <option value="" selected disabled>
                                                                                Tipo
                                                                            </option>
                                                                            <option value="Normal">Normal</option>
                                                                            <option value="Geral">Geral</option>
                                                                        </select>
                                                                    </div>

                                                                    <div class="form-group row">
                                                                        <select id="id_user" style="height: 100%;"
                                                                                name="id_user" class="form-control">
                                                                            <option value="" selected disabled>
                                                                                Colaboradores
                                                                            </option>
{{--                                                                            <option value="0000">Todos</option>--}}
                                                                            @foreach($colaboradores as $c)
                                                                                <option
                                                                                    value="{{$c->id}}">{{$c->nome}}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>

                                                                    <div class="form-group row">
                                                                        <input id="data_inicio" type="datetime-local"
                                                                               placeholder="Data Inicio"
                                                                               class="form-control @error('data') is-invalid @enderror"
                                                                               title="Data Início" name="data_inicio"
                                                                               required>
                                                                    </div>

                                                                    <div class="form-group row">
                                                                        <input id="data_fim" type="datetime-local"
                                                                               placeholder="Data Fim"
                                                                               class="form-control @error('data') is-invalid @enderror"
                                                                               title="Data Fim" name="data_fim"
                                                                               required>
                                                                    </div>

                                                                    <div class="form-group row">
                                                                        <select id="status" style="height: 100%;"
                                                                                name="status" class="form-control
                                                                                @error('arquivo') is-invalid @enderror">
                                                                            <option value="Ativo">Ativo</option>
                                                                            <option value="Inativo">Inativo</option>
                                                                        </select>
                                                                    </div>

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

                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-danger"
                                                                data-dismiss="modal">Cancelar
                                                        </button>
                                                        <button type="submit" class="btn btn-success">Enviar
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    {{-- Modal Editar Aviso--}}
    <div class="">
        <div class="">
            <!-- Modal -->
            <div class="modal fade" id="modalEditarAviso" tabindex="-1" role="dialog"
                 aria-labelledby="TituloModalCentralizado" aria-hidden="true">
                <div class="container">
                    <div class="modal-dialog modal-dialog-xs" role="document">
                        <div class="modal-content" id="content-modal">
                            <div class="modal-header center" id="header-modal">
                                <h3 class="modal-title" id="tituloEditarAviso">EDITAR AVISO</h3>
                            </div>
                            <div class="modal-body">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-12 descricao-modal" id="descricaoEditarAviso">
                                            <div class="col-md-12 col-sm-12">
                                                <form method="POST" action="/editar_aviso"
                                                      id="form_editar_aviso">
                                                    <div class="modal-body">
                                                        <div class="container">
                                                            <div class="row">
                                                                <div class="col-xs-12 col-sm-12 descricao-modal">
                                                                    <input class="id_aviso_editar" type="hidden" name="id_aviso">
                                                                    @csrf
                                                                    <div class="form-group row">
                                                                        <input id="editar_assunto" type="text"
                                                                               placeholder="Assunto"
                                                                               class="form-control @error('assunto') is-invalid @enderror"
                                                                               name="assunto" max="255" required
                                                                               autofocus>

                                                                        @error('assunto')
                                                                        <span class="invalid-feedback" role="alert">
                                                                            <strong>{{ $message }}</strong>
                                                                        </span>
                                                                        <script>
                                                                            $('#modalEditarAviso').modal('show');
                                                                        </script>
                                                                        @enderror
                                                                    </div>

                                                                    <div class="form-group row">
                                                                    <textarea id="editar_mensagem"
                                                                              placeholder="Mensagem"
                                                                              class="form-control
                                                                               @error('mensagem') is-invalid @enderror"
                                                                              maxlength="1000"
                                                                              name="mensagem" required
                                                                              autofocus></textarea>

                                                                        @error('mensagem')
                                                                        <span class="invalid-feedback" role="alert">
                                                                            <strong>{{ $message }}</strong>
                                                                        </span>
                                                                        <script>
                                                                            $('#modalEditarAviso').modal('show');
                                                                        </script>
                                                                        @enderror
                                                                    </div>

                                                                    <div class="form-group row">
                                                                        <select id="editar_tipo" style="height: 100%;"
                                                                                name="tipo" class="form-control">
                                                                        </select>
                                                                    </div>

                                                                    <div class="form-group row">
                                                                        <select id="editar_id_user"
                                                                                style="height: 100%;"
                                                                                name="id_user" class="form-control">

                                                                        </select>
                                                                    </div>

                                                                    <div class="form-group row">
                                                                        <input id="editar_data_inicio"
                                                                               type="datetime-local"
                                                                               placeholder="Data Inicio"
                                                                               class="form-control @error('data') is-invalid @enderror"
                                                                               title="Data Início" name="data_inicio"
                                                                               required>
                                                                    </div>

                                                                    <div class="form-group row">
                                                                        <input id="editar_data_fim"
                                                                               type="datetime-local"
                                                                               placeholder="Data Fim"
                                                                               class="form-control @error('data') is-invalid @enderror"
                                                                               title="Data Fim" name="data_fim"
                                                                               required>
                                                                    </div>

                                                                    <div class="form-group row">
                                                                        <select id="editar_status" style="height: 100%;"
                                                                                name="status" class="form-control
                                                                                @error('arquivo') is-invalid @enderror">
                                                                        </select>
                                                                    </div>

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

                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-danger"
                                                                data-dismiss="modal">Cancelar
                                                        </button>
                                                        <button type="submit" class="btn btn-success">Enviar
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src='/js/aviso/listar_aviso_adm.js?v=2'></script>
@endsection