@extends('layouts.app')

@section('title', 'Edit Officer')

@section('content')
    <main id="main">
        <section class="breadcrumbs">
            <div class="container">
                <div class="d-flex justify-content-between align-items-center">
                    <h2>Edit Officer - {{ $countyOffice->office->name }}</h2>
                    <ol>
                        <li><a href="{{ route('home.index') }}">Home</a></li>
                        <li><a href="{{ route('dashboard.index') }}">Dasboard</a></li>
                        <li><a href="{{ route('states.counties.index', $state->slug) }}">Counties</a></li>
                        <li><a href="{{ route('states.counties.show', [$state->slug, $county->slug]) }}">{{ $county->name }}</a></li>
                        <li>Edit Officer - {{ $countyOffice->office->name }}</li>
                    </ol>
                </div>
            </div>
        </section>

        <section class="contact">
            <div class="container">
                <div class="row mb-3">
                    <div class="col">
                        <p>
                            Current Officer: Ryan Minor
                        </p>
                        <form  role="form" class="php-email-form" action="{{ route('states.counties.updateOffice', [$state->slug, $county->slug, $countyOffice->id]) }}" method="post">
                            @method('put')
                            @csrf
                            <div class="form-group">
                                <label for="users_typeahead">Select User</label>
                                @if(!empty($countyOffice->user_id))
                                    @php $usersTypeahead = null;
                                    $user = \App\Models\User::find($countyOffice->user_id);
                                    if ($user) {
                                        $usersTypeahead = $user->first_name.' '.$user->last_name;
                                    } @endphp
                                    <div id="scrollable-dropdown-menu">
                                        <input type="text"
                                            id="users_typeahead"
                                            name="users_typeahead"
                                            class="form-control typeahead"
                                            autocomplete="off"
                                            value="{{ old('users_typeahead', $usersTypeahead) }}"
                                        />
                                    </div>
                                    <input type="hidden" name="user_id" value="{{ old('user_id', $countyOffice->user_id) }}" />
                                @else
                                    <div id="scrollable-dropdown-menu">
                                        <input type="text"
                                            id="users_typeahead"
                                            name="users_typeahead"
                                            class="form-control typeahead"
                                            autocomplete="off"
                                            value="{{ old('users_typeahead') }}"
                                        />
                                    </div>
                                    <input type="hidden" name="user_id" value="{{ old('user_id', $countyOffice->user_id) }}" />
                                @endif
                                @error('user_id') <span class="invalid-feedback" role="alert">{{ $message }}</span> @enderror
                            </div>
                            <div class="text-left mt-3">
                                <button type="submit">Save Office</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection

@push('styles')
    <style>
        #scrollable-dropdown-menu .tt-menu {
            max-height: 250px;
            overflow-y: auto;
        }
    </style>
@endpush

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src={{ asset('js/autocomplete.min..js') }}></script>
    <script>
        let users = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.whitespace('id', 'value'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            remote: {
                url: '{{ route('users.autocomplete') }}?search=%QUERY',
                wildcard: '%QUERY',
                transform: function(response) {
                    return $.map(response, function(user) {
                        return {
                            id: user.id,
                            value: user.first_name + ' ' + user.last_name + '(' + user.email + ')'
                        };
                    });
                }
            },
        });
        $('#users_typeahead').typeahead({
            minLength: 3,
            highlight: true
        }, {
            name: 'users',
            display: 'value',
            source: users,
            limit: 250,
            templates: {
                empty: function(context) {
                    $('.tt-dataset').text('No Results Found');
                }
            }
        }).bind('typeahead:selected', function(obj, datum, value) {
            $('input[name="user_id"]').val(datum.id);
        });
    </script>
@endpush