@extends('layouts.contracheque.contracheque-vitante')
@section('content')
    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        html,
        body {
            height: 100%;
        }

        body {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            padding-top: 40px;
            padding-bottom: 40px;
            background-image: url({{url('img/layout/bg03.jpg')}});
            background-repeat: no-repeat;
        }

        .form-signin {
            width: 100%;
            max-width: 330px;
            padding: 15px;
            margin: auto;
        }

        .form-signin .checkbox {
            font-weight: 400;
        }

        .form-signin .form-control {
            position: relative;
            box-sizing: border-box;
            height: auto;
            padding: 10px;
            font-size: 16px;
        }

        .form-signin .form-control:focus {
            z-index: 2;
        }

        .form-signin input[type="email"] {
            margin-bottom: -1px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        .form-signin input[type="password"] {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
    </style>

    <div class="form-signin">
        <form name="frmLoginContracheque" class="" action="{{route('contracheque.autenticar')}}" method="post">
            @csrf
            <img class="mb-5" src="{{url('img/brasao/'.Config::get('myConstants.instituicao.brasao'))}}"
                 style="margin-left: 80px; padding: 15px 0px 0px 0px" alt="Logo">

            <h1 class="h3 mb-3 font-weight-normal text-center">Holerite Digital</h1>
            <p class="text-justify font-weight-light">&nbsp;&nbsp;Área exclusiva para servidores
                da {{Config::get('myConstants.instituicao.nome')}}. Bem vindo!</p>

            <label for="cpf" class="sr-only">Email address</label>
            <input type="text" name="cpf" class="form-control" placeholder="Digite seu CPF"
                   onkeypress="return digitos(event);" maxlength="11" required autofocus>

            <label for="password" class="sr-only">Password</label>
            <input type="password" name="password" class="form-control" placeholder="Digite sua senha" required>
            <button class="btn btn-lg btn-primary btn-block" type="submit">Entrar</button>
        </form>
        <hr>
        <div class="checkbox mb-3 col-auto">
            <button class="btn btn-link" id="btn_p_acesso" data-toggle="modal" data-target="#pAcessoModal">Primeiro
                Acesso
            </button>
            <button class="btn btn-link" id="btn_senha" data-toggle="modal" data-target="#redefinirSenhaModal">Redefinir
                Senha
            </button>
        </div>
    </div>

    <!-- Modal cadastro -->
    <div class="modal fade" id="pAcessoModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form name="formCreateAcesso" action="{{route('contracheque.primeiro-acesso')}}" method="post">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Cadastre-se!</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-3">
                                <label for="">* CPF</label>
                                <input type="text" class="form-control" name="cpf" id="cpf" required>
                            </div>
                            <div class="col-md-9">
                                <label for="">* Nome Completo</label>
                                <input type="text" class="form-control" name="nome" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-9">
                                <label for="">E-mail</label>
                                <input type="email" class="form-control" name="email">
                            </div>
                            <div class="col-md-3">
                                <label for="">* Celular</label>
                                <input type="text" class="form-control" name="celular" id="celular" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <label for="">Frase de segurança</label>
                                <input type="password" class="form-control" name="frase">
                            </div>
                            <div class="col-md-3">
                                <label for="">* Senha</label>
                                <input type="password" class="form-control" id="password" name="password" required>
                            </div>
                            <div class="col-md-3">
                                <label for="">* Confirmação de senha</label>
                                <input type="password" class="form-control" id="re_password" required>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                        <button type="submit" class="btn btn-primary">Gravar Dados</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal redefinir senha -->
    <div class="modal fade" id="redefinirSenhaModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form name="formRedefinirSenha" action="{{route('contracheque.redefinir-senha')}}" method="post">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Redefinir Senha</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <label for="">* Matrícula</label>
                                <input type="text" class="form-control" name="matricula_rdf" id="matricula_rdf" maxlength="8" onkeypress="return digitos(event);" required>
                            </div>
                            <div class="col-md-6">
                                <label for="">* CPF</label>
                                <input type="text" class="form-control" name="cpf_rdf" id="cpf_rdf" required>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                        <button type="submit" class="btn btn-primary">Redefinir</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script>
        /** Criar acesso */
        let frmCreate = $("form[name=formCreateAcesso]");
        let pAcessoModal = $("#pAcessoModal");
        frmCreate.submit(function () {
            let From = $(this).serialize(),
                url = $(this).attr('action'),
                post = $(this).attr('method'),
                password = $(this).find('input#password').val(),
                re_password = $(this).find('input#re_password').val();

            if (password !== re_password) {
                alert('Ops..! \nA confirmação de senha não confere.');

            } else {
                $.ajax({
                    type: post,
                    url: url,
                    data: From,
                    dataType: 'json',
                    beforeSend: function () {
                        $.blockUI({css: {backgroundColor: '#f00', color: '#fff'}, onOverlayClick: $.unblockUI});
                    },
                    success: function (data) {
                        if (data[0] === 'success') {
                            frmCreate.each(function () {
                                this.reset();
                            });
                            $.blockUI({
                                message: '<div class="alert alert-success alert-dismissible" role="alert"><strong><span class=glyphicon glyphicon-ok" aria-hidden="true"></span> Parabéns: </strong> ' + data[1] + ' (:',
                                timeout: 1500,
                                onOverlayClick: $.unblockUI
                            });
                        }
                    },
                    error: function (data) {
                        pAcessoModal.modal('hide');
                        frmCreate.each(function () {
                            this.reset();
                        });

                        /** Mensagens vindo do back-end */
                        if ((data.responseJSON[0] === 'error') || data.responseJSON[0] === 'redefinir') {
                            $.blockUI({
                                message: '<div class="alert alert-danger alert-dismissible" role="alert"><span class="glyphicon glyphicon-alert" aria-hidden="true"></span>&nbsp;' + data.responseJSON[1] + ' ):' + '</div>',
                                timeout: 6000,
                                onOverlayClick: $.unblockUI
                            });
                        } else if (data.responseJSON.errors) {
                            $.each(data.responseJSON.errors, function (key, value) {
                                $.blockUI({
                                    message: '<div class="alert alert-danger alert-dismissible" role="alert"><span class="glyphicon glyphicon-alert" aria-hidden="true"></span>&nbsp;' + value[0] + ' ):' + '</div>',
                                    timeout: 8000,
                                    onOverlayClick: $.unblockUI
                                });
                            });
                        }
                    }
                });
            }
            return false;
        });

        /** Redefinir Senha */
        let formRedefinir = $("form[name=formRedefinirSenha]");
        let redefinirSenhaModal = $("#redefinirSenhaModal");
        formRedefinir.submit(function () {
            let From = $(this).serialize(),
                url = $(this).attr('action'),
                post = $(this).attr('method');

            $.ajax({
                type: post,
                url: url,
                data: From,
                dataType: 'json',
                beforeSend: function () {
                    $.blockUI({css: {backgroundColor: '#f00', color: '#fff'}, onOverlayClick: $.unblockUI});
                },
                success: function (data) {
                    redefinirSenhaModal.modal('hide');
                    if (data[0] === 'success') {
                        formRedefinir.each(function () {
                            this.reset();
                        });
                        $.blockUI({
                            message: '<div class="alert alert-success alert-dismissible" role="alert"><strong><span class=glyphicon glyphicon-ok" aria-hidden="true"></span> Parabéns: </strong> ' + data[1] + ' (:',
                            timeout: 6000,
                            onOverlayClick: $.unblockUI
                        });
                    }
                },
                error: function (data) {
                    redefinirSenhaModal.modal('hide');
                    formRedefinir.each(function () {
                        this.reset();
                    });

                    /** Mensagens vindo do back-end */
                    if ((data.responseJSON[0] === 'error')) {
                        $.blockUI({
                            message: '<div class="alert alert-danger alert-dismissible" role="alert"><span class="glyphicon glyphicon-alert" aria-hidden="true"></span>&nbsp;' + data.responseJSON[1] + ' ):' + '</div>',
                            timeout: 6000,
                            onOverlayClick: $.unblockUI
                        });
                    }
                }
            });

            return false;
        });

        $(function () {
            $('#cpf').mask("999.999.999-99");
            $('#cpf_rdf').mask("999.999.999-99");
            $('#celular').mask("(99)99999-9999");
        })
    </script>
    <script src="{{asset(mix('modulos/contracheque/holerite/js/login.js'))}}"></script>
@endpush