@extends('layout.layout')

@section('section')

    <link rel='stylesheet' href='/css/usuarios/listar_usuarios.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">
        <a href="/registrar">
            <button class="btn btn-info">Cadastrar Usuário</button>
        </a>
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="table-responsive">
                    <h4 class="titulo_tabela">USUÁRIOS</h4>
                    <form id="form-pesquisa" action="" style="display: flex; align-items: center; float: right;">
                        <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>
                    <table class="table table- table-striped table-hover">
                        <thead>
                        <th class="center">Id</th>
                        <th class="center">Nome</th>
                        <th class="center">Login</th>
                        <th>Email</th>
                        <th class="center">Horas Mensais</th>
                        <th class="center">Tempo de Almoço</th>
                        <th class="center">Privilégio</th>
                        <th class="center">Status</th>
                        <th class="center">Ações</th>
                        </thead>
                        <tbody class="tbody_listar_usuarios">

                        </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 Editar Usuario--}}
    <div class="">
        <div class="">
            <!-- Modal -->
            <div class="modal fade" id="modalEditarUsuario" 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="tituloEditarUsuario">EDITAR USUÁRIO</h3>
                        </div>
                        <form method="POST" action="/editar-enviar" id="formCriarUsuario"
                              style="display: flex; flex-direction: column; align-items: center">
                            <div class="modal-body">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-12 descricao-modal" id="descricaoEditarUsuario">
                                            @csrf
                                            <input type="hidden" name="id" id="id">
                                            <div class="form-group row">
                                                <div class="">
                                                    <label class="label_editar" for="editar_nome">Nome</label>
                                                    <input id="editar_nome" type="text" placeholder="Nome"
                                                           class="input-editar form-control @error('nome') is-invalid @enderror"
                                                           name="nome" value="{{ old('nome') }}" required>

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

                                            <div class="form-group row">
                                                <div class="">
                                                    <label class="label_editar" for="editar_login">Login</label>
                                                    <input id="editar_login" type="text" placeholder="Login"
                                                           class="input-editar form-control @error('login') is-invalid @enderror"
                                                           name="login" value="{{ old('login') }}" required>

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

                                            <div class="form-group row">
                                                <div class="">
                                                    <label class="label_editar" for="editar_email">Email</label>
                                                    <input id="editar_email" type="email" placeholder="Email"
                                                           class="input-editar form-control @error('email') is-invalid @enderror"
                                                           name="email" value="{{ old('email') }}" required>

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

                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <div class="">
                                                    <label class="label_editar" for="editar_password">Senha</label>
                                                    <input id="editar_password" type="password" placeholder="Senha"
                                                           class="input-editar form-control @error('password') is-invalid @enderror"
                                                           name="password">

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

                                            <div class="form-group row">
                                                <div class="">
                                                    <label class="label_editar" for="editar_password-confirm">
                                                        Confirmar Senha
                                                    </label>
                                                    <input id="editar_password-confirm" type="password"
                                                           placeholder="Confirmar Senha"
                                                           class="input-editar form-control"
                                                           name="password_confirmation">

                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <div class="">
                                                    <label class="label_editar" for="editar_status">Status</label>
                                                    <select id="editar_status" class="input-editar form-control"
                                                            name="status" style="display: block; width: 206px">

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

                                            <div class="form-group row">
                                                <div class="">
                                                    <label class="label_editar" for="editar_horas_mensais">
                                                        Horas Mensais
                                                    </label>
                                                    <input id="editar_horas_mensais" type="number"
                                                           placeholder="Horas Mensais"
                                                           class="input-editar form-control @error('horas_mensais') is-invalid @enderror"
                                                           name="horas_mensais" required min="0" value="{{ old('horas_mensais') }}">
                                                    <span>
                                                        <strong>Em horas</strong>
                                                    </span>

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

                                            <div class="form-group row">
                                                <div class="">
                                                    <label class="label_editar" for="editar_tempo_almoco">
                                                        Tempo de Almoço
                                                    </label>
                                                    <input id="editar_tempo_almoco" type="number"
                                                           placeholder="Tempo Almoço"
                                                           class="input-editar form-control @error('tempo_almoco') is-invalid @enderror"
                                                           name="tempo_almoco" required min="0" value="{{ old('tempo_almoco') }}">
                                                    <span>
                                                        <strong>Em minutos</strong>
                                                    </span>

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

                                            <div class="form-group row">
                                                <div class="">
                                                    <label class="label_editar"
                                                           for="editar_privilegio">Privilégio</label>
                                                    <select id="editar_privilegio" class="input-editar form-control"
                                                            name="privilegio" style="display: block; width: 206px;">

                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12">
                                            <div align="center" id="loading-class-editar"
                                                 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>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-dismiss="modal"
                                        style="display: block; width: 100px;">
                                    Cancelar
                                </button>
                                <button type="submit" class="btn btn-primary btn-editar-enviar"
                                        style="display: block; width: 100px;">
                                    Editar
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src='/js/usuarios/listar_usuarios.js?v=2'></script>
@endsection