@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 - {{ $townshipOffice->office->name }}</h2>
                    <ol>
                        <li>
                            <a href="{{ route('home.index') }}">{{ __('Home') }}</a>
                        </li>
                        <li>
                            <a href="{{ route('dashboard.index') }}">{{ $state->name }} {{ __('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>
                            <a href="{{ route('states.counties.townships.index', [$state->slug, $county->slug]) }}">
                                {{ __('Townships') }}
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('states.counties.townships.show', [$state->slug, $county->slug, $township->slug]) }}">
                                {{ $township->name ?? 'No Name' }}
                            </a>
                        </li>
                        <li>Edit Officer - {{ $townshipOffice->office->name }}</li>
                    </ol>
                </div>
            </div>
        </section>

        <section class="contact">
            <div class="container">
                <div class="row mb-3">
                    <div class="col">
                        <p>
                            Current Officer: {{ $townshipOffice->getOfficerName() }}
                        </p>
                        <form role="form" class="php-email-form" action="{{ route('states.counties.updateOffice', [$state->slug, $county->slug, $townshipOffice->id]) }}" method="post">
                            @method('put')
                            @csrf
                            <div class="form-group">
                                <label for="autocomplete">Select User</label>
                                <input type="text" class="form-control" name="user_autocomplete" id="autocomplete" value="" />
                                <input type="hidden" name="user_id" value="{{ old('user_id') }}" />
                                <input type="hidden" name="county_office_id" value="{{ $countyOffice->id }}" />
                                @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')
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css">
    <style>
        .ui-autocomplete-loading {
            background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
        }
    </style>
@endpush

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.min.js"></script>
    <script>
        $('#autocomplete').autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: '{{ route('users.autocomplete') }}',
                    dataType: 'json',
                    data: {
                        term: request.term
                    },
                    success: function(data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.first_name + ' ' + item.last_name + ' (' + item.email + ')',
                                value: item.id
                            };
                        }));
                    }
                });
            },
            minLength: 3,
            select: function(event, ui) {
                $('#autocomplete').val(ui.item.label);
                $('input[name="user_id"]').val(ui.item.value);
                return false;
            }
        });
    </script>
@endpush