@extends('layouts.app')

@section('title', 'Editar Animal')

@section('content')

<section class="content">
    <div class="container-fluid">
        @include('template.alert')
        <div class="row">
            <div class="col-sm-12  mt-2">
                <div class="card">
                    <div class="card-header">
                        <h1 id="titulo">Editar animal - {{$animal->nome}}</h1>
                    </div>
                    <form action="{{ route('animal.alterar') }}" method="post">
                        <div class="card-body">
                            @csrf
                            <div class="row">
                                <div class="col-sm-12 col-md-4 form-group">
                                    <label for="nome">Nome: </label>
                                    <input class="form-control mb-2" name="nome" value="{{ $animal->nome }}" required>
                                </div>
                                <div class="col-sm-12 col-md-4 form-group">
                                    <label for="nome">Cor</label>
                                    <input type="text" class="form-control" name="cor" id="cor"
                                        placeholder="Digite a cor do animal" value="{{$animal->cor}}" required>
                                    @error('cor')
                                    <p class="danger">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="col-sm-12 col-md-4 form-group">
                                    <label for="idade">Idade</label>
                                    <input type="text" class="form-control" name="idade" id="idade"
                                        value="{{ $animal->idade }}" required>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12 col-md-4 form-group">
                                    <label for="sexo">Sexo: </label>
                                    <select class="form-control mb-2 col-11" name="sexo" required>
                                        <option value="">Selecione...</option>
                                        @foreach($sexos as $sexo)
                                        <option value="{{ $sexo->id }}" {{ ($animal->sexo_id==$sexo->id)? 'selected': ''
                                            }}>{{ $sexo->nome }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-sm-12 col-md-4 form-group">
                                    <label for="porte">Porte: </label>
                                    <select class="form-control mb-2 col-11" name="porte" required>
                                        <option value="">Selecione...</option>
                                        @foreach($portes as $porte)
                                        <option value="{{ $porte->id }}" {{ ($animal->porte_id==$porte->id)? 'selected':
                                            '' }}>{{ $porte->tipo }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-sm-12 col-md-4 form-group">
                                    <label>Raça</label>
                                    <select class="form-control" id="raca" name="raca" required>
                                        <option value="">Selecione...</option>
                                        @foreach ($racas as $raca)
                                        <option @if($animal->raca_id==$raca->id) selected @endif value="{{ $raca->id
                                            }}">{{ $raca->nome }} -
                                            {{$raca->animalTipo->nome}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <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>
                        <div class="card-footer">
                            <input type="hidden" name="id" value={{ $animal->id }} />
                            <button type="submit" class="btn btn-warning">Editar</button>
                            <a class="btn btn-secondary" href="{{route('animal.consulta')}}">Voltar</a>
                        </div>
                    </form>
                </div>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</section>
@endsection
@push('scripts')
<script>
    $(function () {
        showTutorInfo();
        repopulateForm();
        $('#raca').select2({
            placeholder: 'Selecione uma raça',
            language: "pt-BR"
        });
        $('#tutor').select2({
            placeholder: 'Digite 3 caracteres 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,
                        }
                    }
                },
            }
        });
        $('#tutor').on('select2:select', function (e) {
            $("#tutor_nome").val(e.params.data.text);
        });
    });
    $(document).on('select2:open', () => {
        document.querySelector('.select2-search__field').focus();
    });
    function showTutorInfo() {
        var tutorId = {{ Js:: from($animal -> tutor_id)
    }};
    var tutorText = {{ Js:: from($animal -> tutor_nome)}} + ' - CPF: ' + {{ Js:: from($animal -> tutor_cpf) }};
    if (tutorId != '') {
        var option = new Option(tutorText, tutorId, true, true);
        $('#tutor').append(option).trigger('change');
        $('#tutor').trigger({
            type: 'select2:select',
            params: {
                data: {
                    id: tutorId,
                    text: tutorText
                }
            }
        });
    }
    }
    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