@extends('layout.layout')

@section('section')

    <link rel='stylesheet' href='/css/home/home.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

    @if(Session::has('mensagem_erro'))
        <script>
            Swal.fire(
                'Erro!',
                '{{ Session::get('mensagem_erro') }}',
                'error'
            )
        </script>
    @endif

    <div class="container container-home">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <h4 class="titulo_tabela">RELATÓRIO DO DIA</h4>
                <input id="data_dia" type="date" class="form-control"
                       name="data_dia" value="{{ $data_dia }}">
                <div class="table-responsive">
                    <table class="table table- table-striped table-hover">
                        <thead>
                        <th class="center">Colaborador</th>
                        <th class="center">Hora Início</th>
                        <th class="center">Início Almoço</th>
                        <th class="center">Fim Almoço</th>
                        <th class="center">Hora Fim</th>
                        <th class="center">Total Horas</th>
                        <th class="center">Negativo Almoço</th>
                        <th class="center">Situação</th>
                        <th class="center">Ações</th>
                        </thead>
                        <tbody class="tbody_relatorio_diario">

                        </tbody>
                    </table>
                    <div class="col-sm-12">
                        <div align="center" id="loading-class-relatorio-diario"
                             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>

    <div class="container container-home">
        <div class="row justify-content-center">
            <div class="col-md-12">
                {{--                <div class="table-responsive">--}}
                <h4 class="titulo_tabela">AVISOS</h4>
                <div class="col-md-12 div-avisos">

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

    <div class="container container-home">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <h4 class="titulo_tabela">FALTAS JUSTIFICADAS</h4>
                <div class="table-responsive">
                    <table class="table table- table-striped table-hover">
                        <thead>
                        <th class="center">Colaborador</th>
                        <th class="center td-assunto-tabela-faltas-justificadas">Assunto</th>
                        <th class="center">Descrição</th>
                        <th class="center td-data-tabela-faltas-justificadas">Data</th>
                        <th class="center">Arquivo</th>
                        <th class="center">Situação</th>
                        </thead>
                        <tbody class="tbody_faltas_justificadas">

                        </tbody>
                    </table>
                    <div class="col-sm-12">
                        <div align="center" id="loading-class-faltas-justificadas"
                             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>


    {{--Modal Mensagem Completa--}}
    <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 Enviar Aviso--}}
    <div class="">
        <div class="">
            <!-- Modal -->
            <div class="modal fade" id="modalEnviarAviso" 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="tituloEnviarAviso">ENVIAR AVISO</h3>
                        </div>
                        <div class="modal-body">
                            <div class="container">
                                <div class="row">
                                    <div class="col-xs-12 col-sm-12 descricao-modal" id="descricaoEnviarAviso">
                                        <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>
                                                                        $('#modalEnviarAviso').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>
                                                                        $('#modalEnviarAviso').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_enviar_aviso"
                                                                            style="height: 100%;"
                                                                            name="id_user" class="form-control">
                                                                    </select>
                                                                </div>

                                                                <div class="form-group row">
                                                                    <input id="data_inicio" type="datetime-local"
                                                                           placeholder="Data Inicio"
                                                                           class="form-control"
                                                                           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"
                                                                           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>

    {{--Modal Ajustar Horario--}}
    <div class="">
        <div class="">
            <!-- Modal -->
            <div class="modal fade" id="modalAjustarHorario" 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="tituloAjustarHorario">AJUSTAR HORÁRIO</h3>
                            </div>
                            <div class="modal-body">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-12 descricao-modal" id="descricaoAjustarHorario">
                                            <div class="col-md-12 col-sm-12">
                                                <form method="POST" action="/ajustar_horario_do_dia"
                                                      id="form_ajustar_hora">
                                                    @csrf
                                                    <h4 class="center">Referente ao dia <span
                                                            class="data_ajuste"></span></h4>
                                                    <input type="hidden" name="id_controle_horario"
                                                           class="id_controle_horario">
                                                    <input type="hidden" name="id_usuario"
                                                           class="id_usuario_ajustar_horario">
                                                    <input type="hidden" name="data_ajustar"
                                                           class="data_ajustar">

                                                    <div class="form-group row" style="margin-top: 20px;">
                                                        <div class="col-md-12">
                                                            <label>Data Inicial: </label>
                                                            <div class="input-button">
                                                                <input id="data_inicio_ajustar_horario" type="time"
                                                                       class="form-control" name="data_inicio">
                                                                <button class="btn btn-danger btn-apagar" type="button"
                                                                        id="apagar_data_inicio">
                                                                    <img src="/img/delete2.png">
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="form-group row inicio_almoco_ajustar_horario"
                                                         style="margin-top: 20px;">
                                                        <div class="col-md-12">
                                                            <label>Início Almoço: </label>
                                                            <div class="input-button">
                                                                <input id="inicio_almoco_ajustar_horario" type="time"
                                                                       class="form-control" name="inicio_almoco">
                                                                <button class="btn btn-danger btn-apagar" type="button"
                                                                        id="apagar_inicio_almoco">
                                                                    <img src="/img/delete2.png">
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="form-group row fim_almoco_ajustar_horario"
                                                         style="margin-top: 20px;">
                                                        <div class="col-md-12">
                                                            <label>Fim Almoço: </label>
                                                            <div class="input-button">
                                                                <input id="fim_almoco_ajustar_horario" type="time"
                                                                       class="form-control" name="fim_almoco">
                                                                <button class="btn btn-danger btn-apagar" type="button"
                                                                        id="apagar_fim_almoco">
                                                                    <img src="/img/delete2.png">
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="form-group row" style="margin-bottom: 20px;">
                                                        <div class="col-md-12">
                                                            <label>Data Fim: </label>
                                                            <div class="input-button">
                                                                <input id="data_fim_ajustar_horario" type="time"
                                                                       class="form-control" name="data_fim">
                                                                <button class="btn btn-danger btn-apagar" type="button"
                                                                        id="apagar_data_fim">
                                                                    <img src="/img/delete2.png">
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="form-group row div_btn_justificativa">
                                                        <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/home/home_adm.js?v=2'></script>
@endsection