@extends('layouts.app2')
@section('content')
    <div class="row">
        <div class="col-xl-4 col-lg-5 col-md-6 d-flex flex-column mx-auto">
            <div class="card card-plain mt-2">
                <div style="text-align:center;">
                    <img src="{{ asset('images/logotipo.png') }}" style="width:220px;" alt="{{ config('app.name') }}">
                </div>
                <div class="card-body">
                    @if ($errors->has('erro_login'))
                        <div id="alerta" class="alert alert-danger text-center">
                            {{ $errors->first('erro_login') }}
                        </div>
                    @endif

                    {{-- <div class="form-group">
                        <label for="access_type">
                            Acessar como
                        </label>
                        <div>
                            <input type="checkbox" id="access_type" name="access_type" data-toggle="toggle" data-size="sm"
                                data-on="Aluno" data-off="Contratante" data-onstyle="success" data-offstyle="info"
                                data-width="100%">
                        </div>
                    </div> --}}

                    <form method="POST" action="{{ route('login') }}" name="form-acessar" id="form-acessar">
                        @csrf
                        <label>Email</label>
                        <div class="mb-3">
                            <input name="email" id="email" type="text"
                                class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" required autofocus
                                placeholder="E-mail" value="{{ old('email', null) }}">
                            @if ($errors->has('email'))
                                <div class="invalid-feedback" style="font-size:12px;">
                                    {{ $errors->first('email') }}
                                </div>
                            @endif
                        </div>

                        <label>Senha</label>
                        <div class="mb-3">
                            <input name="password" type="password" id="password"
                                class="form-control {{ $errors->has('password') ? ' is-invalid' : '' }}" required
                                placeholder="Senha">
                            @if ($errors->has('password'))
                                <div class="invalid-feedback" style="font-size:12px;">
                                    {{ $errors->first('password') }}
                                </div>
                            @endif
                        </div>

                        <div id="sede">
                            <label>Sede</label>
                            <div class="mb-3">
                                <select name="headquarter" id="headquarter" class="form-select" style="font-size:12px;">
                                    <option value="" selected disabled style="font-size:12px">-- Nenhuma sede --</option>
                                </select>
                                @if ($errors->has('headquarter'))
                                    <div class="invalid-feedback" style="font-size:12px;">
                                        {{ $errors->first('headquarter') }}
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="text-center">
                            <button type="button" id="btn-acessar" name="btn-acessar"
                                class="btn bg-gradient-info w-100 mt-4 mb-0">Acessar Sistema</button>
                        </div>

                    </form>
                </div>
                {{-- <div class="card-footer text-center pt-0 px-lg-2 px-1">
                    <p class="mb-4 text-sm mx-auto">
                        Não tem uma conta?
                        <a href="{{ route('register') }}" class="text-info text-gradient
            font-weight-bold">
            Cadastre-se
            </a>
            </p>
        </div> --}}
            </div>
        </div>
        <div class="col-md-6">
            <div class="oblique position-absolute top-0 h-100 d-md-block d-none me-n8">
                <div class="oblique-image bg-cover position-absolute fixed-top ms-auto h-100 z-index-0 ms-n6"
                    style="background-image:url('images/bg_login.jpg')"></div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    @parent

    <script>
        $(function() {
            $(document).ready(function() {

                function removeOptions(selectElement) {
                    var i, L = selectElement.options.length - 1;
                    for (i = L; i >= 0; i--) {
                        selectElement.remove(i);
                    }
                }

                // $('#headquarter').select2({
                //     theme: 'bootstrap-5'
                // });

                // $("#headquarter").select2({
                //     theme: "bootstrap-5",
                //     // containerCssClass: "select2--small", // For Select2 v4.0
                //     selectionCssClass: "select2--small", // For Select2 v4.1
                //     dropdownCssClass: "select2--small",
                // });

                let has_headquarter = '';

                removeOptions(document.getElementById('headquarter'));
                let headquarter = document.getElementById('headquarter')
                let option = document.createElement('option')
                headquarter.disabled = true
                option.value = ''
                option.text = '-- Escolha a sede --'
                option.selected = true
                option.disabled = true
                headquarter.add(option)

                $('#email').on('keyup', (ev) => {
                    $('#email').val($('#email').val().toLowerCase());
                });

                $('#email').on('blur', function(event) {

                    let email = $('#email').val();

                    $.ajax({
                        type: "GET",
                        url: "{{ route('auth.load.headquarters') }}",
                        data: {
                            email: email,
                        },
                        dataType: "json",
                        success: function(data) {
                            if (data.length > 0) {
                                removeOptions(document.getElementById('headquarter'));
                                option.value = '';
                                option.text = '-- Escolha uma sede ---';
                                option.selected = true
                                option.disabled = true
                                headquarter.add(option);
                                $.each(data, function(index, value) {
                                    $("#headquarter").append(
                                        '<option value="' +
                                        data[index].headquarter_code +
                                        '">' + data[index]
                                        .headquarter_code + '</option>');
                                })
                                has_headquarter = 1;
                                headquarter.disabled = false
                            } else {
                                headquarter.disabled = true
                                removeOptions(document.getElementById('headquarter'));
                                let option = document.createElement('option');
                                option.value = '';
                                option.text = '-- Nenhuma sede para este usuário ---';
                                headquarter.add(option);
                            }
                        },
                        error: function(data) {
                            headquarter.disabled = true
                            removeOptions(document.getElementById('headquarter'));
                            let option = document.createElement('option');
                            option.value = '';
                            option.text = '-- Nenhuma sede para este usuário ---';
                            headquarter.add(option);
                        }
                    });
                })

                $('#btn-acessar').on('click', function(event) {
                    if (document.getElementById('email').value == '') {
                        swal({
                                title: 'Preencha o e-mail',
                                icon: "error",
                                dangerMode: true,
                            })
                            .then((willDelete) => {
                                if (willDelete) {
                                    $("#email").focus();
                                }
                            });
                        return false;
                    }

                    if (document.getElementById('password').value == '') {
                        swal({
                                title: 'Preencha a senha',
                                icon: "error",
                                dangerMode: true,
                            })
                            .then((willDelete) => {
                                if (willDelete) {
                                    $("#password").focus();
                                }
                            });
                        return false;
                    }

                    if (document.getElementById('headquarter').value == '') {
                        if (has_headquarter == 1) {
                            swal({
                                    title: 'Escolha a sede',
                                    icon: "error",
                                    dangerMode: true,
                                })
                                .then((willDelete) => {
                                    if (willDelete) {
                                        $("#headquarter").focus();
                                    }
                                });
                            return false;
                        }
                    }

                    $("#form-acessar").submit();
                })

                setTimeout(function() {
                    $(".alert").fadeOut("slow", function() {
                        $(this).alert('close');
                    });
                }, 2500);
            });
        });
    </script>

    {{-- <script>
        $('#access_type').change(function(event) {
            var sede = document.getElementById('sede');

            if(sede.style.display === "none") {
                sede.style.display = "block";
                $("#email").focus();
            } else {
                sede.style.display = "none";
                $("#email").focus();
            }
        });
    </script> --}}
@endsection