@extends('layouts.app')
@section('content')
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card-group">
                <div class="card p-4">
                    <div class="card-body">
                        @if (\Session::has('message'))
                            <p class="alert alert-info">
                                {{ \Session::get('message') }}
                            </p>
                        @endif
                        <form method="POST" action="{{ route('login') }}">
                            {{ csrf_field() }}
                            <div class="mb-3 text-center">
                                <img src="{{ asset('images/logotipo.png') }}" style="width:200px;"
                                    alt="Sistema Esporte Total">
                            </div>

                            @if ($errors->has('erro_login'))
                                <div id="alerta" class="alert alert-danger text-center">
                                    {{ $errors->first('erro_login') }}
                                </div>
                            @endif

                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fa fa-user"></i>
                                    </span>
                                </div>
                                <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">
                                        {{ $errors->first('email') }}
                                    </div>
                                @endif
                            </div>

                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fa fa-lock"></i></span>
                                </div>
                                <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">
                                        {{ $errors->first('password') }}
                                    </div>
                                @endif
                            </div>
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fa fa-home"></i></span>
                                </div>
                                <select name="headquarter" id="headquarter" class="custom-select" placeholder="Sede">
                                </select>
                            </div>
                            <div style="height:20px;">
                                &nbsp;
                            </div>
                            <div class="row">
                                <div class="col-12 text-right">
                                    <button type="submit" class="btn btn-primary px-4">
                                        Acessar Sistema
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    @parent
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

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

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

                removeOptions(document.getElementById('headquarter'));
                let headquarter = document.getElementById('headquarter')
                let option = document.createElement('option')
                headquarter.disabled = true
                option.value = ''
                option.text = '-- Digite um usuário para listar as sedes --'
                option.selected = true
                option.disabled = true
                headquarter.add(option)

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

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

                    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.disabled = true
                                headquarter.add(option);
                                $.each(data, function(index, value) {
                                    $("#headquarter").append(
                                        '<option value="' +
                                        data[index].headquarter_code +
                                        '">' + data[index]
                                        .headquarter_code + '</option>');
                                })
                                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);
                        }
                    });
                })
            });
        });
    </script>
@endsection