@extends('layouts.admin')

@section('title', $state->name)

@section('content')
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">{{ $state->name }} - {{ $stateOffice->office->name }}</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
            <a href="#" class="btn btn-sm btn-outline-danger deleteButton" id="{{ $stateOffice->id }}">
                Remove State Officer
            </a>
            <form name="deleteForm{{ $stateOffice->id }}"
                method="post"
                action="{{ route('admin.states.destroyStateOffice', [$state->id, $stateOffice->id]) }}">
                @csrf
                @method('delete')
            </form>
        </div>
    </div>

    <div class="container">
        <div class="row mb-3">
            <div class="col-md-6">
                <form action="{{ route('admin.states.updateStateOffice', [$state->id, $stateOffice->id]) }}" method="post">
                    @method('put')
                    @csrf
                    <input type="hidden" name="state_office_id" value="{{ $stateOffice->id }}" />
                    <div class="card">
                        <div class="card-body">
                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="autocomplete">Select New Officer:</label>
                                        <input type="text" class="form-control" name="user_autocomplete" id="autocomplete" value="" />
                                        <input type="hidden" name="user_id" value="{{ old('user_id', $stateOffice->user_id) }}" />
                                        @error('user_id') <span class="invalid-feedback" role="alert">{{ $message }}</span> @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="is_vetted">Is Vetted?</label>
                                        <select class="form-control form-select" name="is_vetted" id="is_vetted">
                                            <option value=""></option>
                                            <option value="0" {{ old('is_vetted', $stateOffice->is_vetted) == '0' ? 'selected' : '' }}>No</option>
                                            <option value="1" {{ old('is_vetted', $stateOffice->is_vetted) == '1' ? 'selected' : '' }}>Yes</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <button type="submit" class="btn btn-primary">Save Office</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-md-6">
                <h5>Current Officer: {{ $stateOffice->getOfficerName() }}</h5>
                <img src="{{ $stateOffice->user?->getProfilePhotoUrl() }}" class="img-fluid mb-1" width="100%" alt="Profile Photo" />
            </div>
        </div>
    </div>
@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('admin.states.usersAutocomplete', $state->id) }}',
                    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;
            }
        });

        $(document).on('click', '.deleteButton', function(event) {
            event.preventDefault();
            let id = $(this).attr('id');
            Swal.fire({
                title: "Are you sure?",
                text: "Are you sure you want to remove this state officer? You will not be able to revert!",
                icon: "warning",
                buttons: true,
                showCancelButton: true,
            }).then(function(result) {
                if (result.value === true) {
                    $("form[name='deleteForm" + id + "']").submit();
                }
            });
        });
    </script>
@endpush