@extends('layouts.app')

@section('title', 'State Office')

@section('content')
    <main id="main">
        <section class="breadcrumbs">
            <div class="container">
                <div class="d-flex justify-content-between align-items-center">
                    <h2>State Office - {{ $stateOffice->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>Edit Office - {{ $stateOffice->office->name }}</li>
                    </ol>
                </div>
            </div>
        </section>

        <section class="contact">
            <div class="container">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <p>
                            <strong>Current Officer</strong>: {{ $stateOffice->getOfficerName() }}
                            @if ($stateOffice->user_id)
                                <button class="btn btn-sm btn-outline-danger removeBtn rounded-0">Remove Officer</button>
                            @endif
                        </p>
                        <form role="form" class="php-email-form" action="{{ route('states.updateStateOffice', [$state->slug, $stateOffice->id]) }}" method="post">
                            @method('put')
                            @csrf
                            <input type="hidden" name="county_office_id" value="{{ $stateOffice->id }}" />
                            <div class="form-group mb-3">
                                <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') }}" />
                                @error('user_id') <span class="invalid-feedback" role="alert">{{ $message }}</span> @enderror
                            </div>
                            <div class="form-group">
                                <label for="is_vetted">Is Vetted?</label>
                                <select class="form-control form-select rounded-0" style="height:41px;" 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>
                                @error('is_vetted') <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>
    <form name="removeForm" method="POST" action="{{ route('states.removeStateOffice', [$state->slug, $stateOffice->id]) }}">
        @csrf
        @method('delete')
    </form>
@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;
            }
        });

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