@extends('layouts.template')

@section('style')

@endsection
@section('content')
    <div class="login-bg pattern-7" style="height: 100em">
        <div class="container">
            <br>
            <br>
            <section class="login-section">

                <div class="card" style="width: 28rem; margin-top: 5em">
                    <div class="card-body">

                        <div class="form-horizontal">

                        <!--Header-->
                            <div class="form-header bg-unique">
                                <h3><i class="fa fa-lock"></i> Login:</h3>
                            </div>

                            <!--Body-->
                            <div class="md-form">
                                <i class="fa fa-envelope prefix grey-text"></i>
                                <input type="text" name="email" id="correo" class="form-control form-control-lg">
                                <label for="defaultForm-email">E-mail</label>
                                @if ($errors->has('email'))
                                    <span class="help-block">
                                    <strong>{{ $errors->first('email') }}</strong>
                                </span>
                                @endif
                            </div>

                            <div class="md-form">
                                <i class="fa fa-lock prefix grey-text"></i>
                                <input type="password" name="password" id="pass" class="form-control form-control-lg">
                                {{--<label for="defaultForm-pass" class="active">Password</label>--}}
                                <label for="defaultForm-pass">Password</label>
                                @if ($errors->has('password'))
                                    <span class="help-block">
                                    <strong>{{ $errors->first('password') }}</strong>
                                </span>
                                @endif
                            </div>

                            <div class="text-center">
                                <button id="login" class="btn btn-unique waves-effect waves-light">Iniciar Sesión</button>
                            </div>
                <div class="form-group">
                <button id="btn-Google" class="btn btn-danger btn-lg btn-block"><i class="fa fa-google"></i> Google</button>
                </div>
                        </div>

                    </div>

                    <!--Footer-->
                    <div class="modal-footer">
                    {{--<div class="options">
                    <p>Not a member? <a href="#">Sign Up</a></p>
                    <p>Forgot <a href="{{ url('/password/email') }}">Password?</a></p>
                        <a class="dropdown-item waves-effect waves-light" href="{{ url('/password/email') }}"
                           onclick="event.preventDefault();
                                                     document.getElementById('password-form').submit();">
                            Olvidó su contraseña?</a>
                        <form id="password-form" action="{{ url('/password/reset') }}" method="GET"
                              style="display: none;">
                        {{ csrf_field() }}
                        </form>
                    </div>--}}
                    </div>

                </div>


            </section>

        </div>
    </div>
    {{--<div class="col-md-6">--}}

    {{--<div class="view">--}}
    {{--<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="">--}}
    {{--<div class="mask pattern-8 flex-center waves-effect waves-light">--}}
    {{--<p class="white-text">.pattern-8</p>--}}
    {{--</div>--}}
    {{--</div>--}}

    {{--</div>--}}
@endsection

@section('jquery')
<script src="https://www.gstatic.com/firebasejs/4.6.0/firebase.js"/></script>
<script type="text/javascript">
 var config = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: ""
  };
  firebase.initializeApp(config);

  const txtEmail = document.getElementById('correo');
const txtPassword = document.getElementById('pass');
const btnLogin = document.getElementById('login');
console.log('before');
btnLogin.addEventListener('click', e => {
    console.log('listener');
    const email = txtEmail.value;
    const pass = txtPassword.value;
    const auth = firebase.auth();

    const promesa = auth.signInWithEmailAndPassword(email,pass);
    promesa.catch(e => location.href = "admin/error.php");

});


firebase.auth().onAuthStateChanged(firebaseUser => {
    if (firebaseUser) {
            location.href="../../home";
        }
});


  function IngresoGoogle() {
    if (!firebase.auth().currentUser) {
        var provider = new firebase.auth.GoogleAuthProvider();

        provider.addScope('https://www.googleapis.com/auth/plus.login');
        firebase.auth().signInWithPopup(provider).then(function(result){
            var token = result.credential.accessToken;
            var user = result.user;
            var name = result.user.displayName;
            var correo = result.user.email;
            var foto = result.user.photoURL;
            var red = 'Google';
            location.href = 'login/index.php?name=' + name + '&correo=' + correo + '&foto=' + foto + '&red=' + red;
        }).catch(function(error){
            var errorCode = error.code;
            if (errorCode === 'auth/account-exist-with-diferent-credential') {
                alert('El usuario ya existe');
            }
        });
    }else{
        firebase.auth().signOut();
    }
  }

  document.getElementById('btn-Google').addEventListener('click',IngresoGoogle,false);
</script>
@endsection