@extends('layouts.app')

@section('title', 'Cadastro de Animais')

@section('content')


<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-11">
                <h1 id="titulo">Cadastrar Animal</h1>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<section class="content">
    <div class="container-fluid">
        @include('template.alert')
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <form action="{{route('animal.cadastrar')}}" method="post">
                        <div class="card-body">
                            @csrf
                            <div class="row">
                                <div class="form-group col-sm-12 col-md-6">
                                    <label for="tutor">Tutor</label>
                                    <select name="tutor" class="form-control select2" id="tutor" required>
                                    </select>
                                    <input type="hidden" name="tutor_nome" id="tutor_nome">
                                    <small><a href="{{route('pessoas.cadastro')}}" target="_blank">Cadastrar novo
                                            tutor</a> </small>
                                    @error('tutor')
                                    <p class="danger">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12 col-md-6">
                                    <div class="form-group">
                                        <label for="nome">Nome</label>
                                        <input type="text" class="form-control" name="nome" id="nome"
                                            placeholder="Digite o nome do animal" autofocus="true" required
                                            value="{{old('nome')}}">
                                        @error('nome')
                                        <p class="danger">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-3">
                                    <div class="form-group">
                                        <label for="nome">Idade</label>
                                        <input type="text" class="form-control" name="idade" id="idade"
                                            placeholder="Digite a idade aproximada" autofocus="true"
                                            value="{{old('idade')}}">
                                        @error('idade')
                                        <p class="danger">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-3">
                                    <div class="form-group">
                                        <label for="nome">Cor</label>
                                        <input type="text" class="form-control" name="cor" id="cor"
                                            placeholder="Digite a cor do animal" autofocus="true"
                                            value="{{old('cor')}}">
                                        @error('cor')
                                        <p class="danger">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12 col-md-4">
                                    <div class="form-group">
                                        <label>Raça</label>
                                        <select class="form-control" id="raca" name="raca">
                                            <option value="">Selecione...</option>
                                            @foreach ($racas as $raca)
                                            <option @if(old('raca')==$raca->id) selected @endif value="{{ $raca->id
                                                }}">{{ $raca->nome }} -
                                                {{$raca->animalTipo->nome}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-4">
                                    <div class="form-group">
                                        <label>Sexo</label>
                                        <select class="form-control" id="sexo" name="sexo">
                                            <option value="">Selecione...</option>
                                            @foreach ($sexos as $sexo)
                                            <option @if(old('sexo')==$sexo->id) selected @endif value="{{ $sexo->id
                                                }}">{{ $sexo->nome }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-4">
                                    <div class="form-group">
                                        <label>Porte</label>
                                        <select class="form-control" id="porte" name="porte">
                                            <option value="">Selecione...</option>
                                            @foreach ($portes as $porte)
                                            <option @if(old('porte')==$porte->id) selected @endif value="{{ $porte->id
                                                }}">{{ $porte->tipo }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <button type="submit" name="enviar" class="btn btn-primary">Cadastrar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section><!-- /.content -->

@push('scripts')
<script>
    $(function () {
        showTutorFromUrl();
        repopulateForm();
        loadSelect();
    })
    $(document).on('select2:open', () => {
        document.querySelector('.select2-search__field').focus();
    });
    function showTutorFromUrl() {
        var url = new URL(window.location.href);
        var tutorId = url.searchParams.get("tutor_id");
        var tutorName = url.searchParams.get("tutor_nome");
        if (tutorId != null && tutorName != null) {
            var option = new Option(tutorName, tutorId, true, true);
            $('#tutor').append(option).trigger('change');
            $('#tutor').trigger({
                type: 'select2:select',
                params: {
                    data: {
                        id: tutorId,
                        text: tutorName
                    }
                }
            });
        }
    }
    function loadSelect() {
        $('#tutor').select2({
            placeholder: 'Digite o nome ou CPF (Sem pontos e traços) para pesquisar',
            language: "pt-BR",
            delay: 500,
            minimumInputLength: 3,
            ajax: {
                url: "{{route('pessoas.tutor')}}",
                data: function (params) {
                    if (isNumeric(params.term)) {
                        return {
                            cpf: params.term,
                        }
                    } else {
                        return {
                            nome: params.term,
                        }
                    }
                },
            }
        });
        $('#raca').select2({
            placeholder: 'Selecione uma raça',
            language: "pt-BR"
        });

        //small trick to repopulate the select2
        $('#tutor').on('select2:select', function (e) {
            $("#tutor_nome").val(e.params.data.text);
        });
    }

    function isNumeric(str) {
        if (typeof str != "string") return false // we only process strings!
        return !isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
            !isNaN(parseFloat(str)) // ...and ensure strings of whitespace fail
    }
    function repopulateForm() {
        var tutorRepopulate = "{{ old('tutor') }}";
        var tutorInfoRepopulate = "{{ old('tutor_nome') }}";
        if (tutorRepopulate != '' && tutorInfoRepopulate != '') {
            var option = new Option(tutorInfoRepopulate, tutorRepopulate, true, true);
            $('#tutor').append(option).trigger('change');
            $('#tutor').trigger({
                type: 'select2:select',
                params: {
                    data: {
                        id: tutorRepopulate,
                        text: tutorInfoRepopulate
                    }
                }
            });
        }
    }
</script>
@endpush
@endsection