@extends('layouts.esic.gerenciador')
@section('content')
    <style>
        .ui-autocomplete-loading {
            background: white url({{url('img/gif/ajax-loader.gif')}}) right center no-repeat;
        }
    </style>
    <h3 class="page-header"><span class="glyphicon glyphicon-file" aria-hidden="true"></span> Gerenciador <small>(Novo Registro)</small></h3>

    <form name="FrmCreate" action="{{route('esic-gerenciador.store')}}" method="post" role="form">
        @csrf
        <div class="row">
            <div class="col-md-12">
                <label for=""><i style="color: grey">* Campo de Preenchimento Obrigatório</i></label>
            </div>
        </div>
        <div class="row">
            <div class="col-md-2">
                <label for="">* CPF</label>
                <input type="text" class="form-control" name="cpfusuario" onkeypress="return digitos(event);" required maxlength="11">
            </div>
            <div class="col-md-2">
                <label for="">Matrícula</label>
                <input type="text" class="form-control" name="matricula" onkeypress="return digitos(event);" maxlength="8">
            </div>
            <div class="col-md-8">
                <label for="">* Nome Completo</label>
                <input type="text" class="form-control" name="nome" required>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <label for="">* Login</label>
                <input type="text" class="form-control" name="login" required>
            </div>
            <div class="col-md-7">
                <label for="">* E-mail</label>
                <input type="text" class="form-control" name="email" required>
            </div>
            <div class="col-md-2">
                <label for="">Celular</label>
                <input type="text" class="form-control" name="celular" id="celular">
            </div>
        </div>
        <div class="row">
            <div class="col-md-2">
                <label>* Senha</label>
                <input type="password" name="password" maxlength="50" class="form-control" required>
            </div>
            <div class="col-md-2">
                <label>* Confirmar senha</label>
                <input type="password" maxlength="50" class="form-control" required>
            </div>
        </div>
        <hr>

        <div class="row">
            <div class="col-md-12">
                <button type="button" onclick="window.history.back()" class="btn btn-default"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Voltar</button>
                <button type="submit" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span> Salvar</button>
            </div>
        </div>
        <hr>
    </form>
@endsection
@push('script')
    <script>
        $(function () {
            const httpUrl = urlBase + '/e-sic/painel/esic-gerenciador';

            let FrmCreate = $("form[name=FrmCreate]");
            FrmCreate.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) {
                        if (data[0] === 'success') {
                            $.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
                            });

                            $(document.location).attr('href', `${httpUrl}`);
                        }
                    },
                    error: function (data) {
                        /** Mensagens vindo do back-end */
                        $.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;
            });

            $('#celular').mask('99999-9999');
        });
    </script>
@endpush