@can('access', 'record.moves.store')
    <button class="btn btn-labeled btn-labeled-left bg-info mb-3" style="display:block; width: 100%;" data-toggle="modal" data-target="#move-modal">
        <b>
            <i class="fa fa-arrow-right"></i>
        </b>
        Transferir expediente
    </button>
    <div id="move-modal" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Transfiriendo expediente</h5>
                    <button class="close" type="button" data-dismiss="modal">&times;</button>
                </div>
                <form
                    action="{{ route('record.moves.store', $record->id) }}"
                    method="POST"
                    enctype="multipart/form-data"
                >
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <x-forms.label>Oficina a transferir el expediente</x-forms.label>
                            <x-forms.selects.basic
                                name="department_id"
                                :value="old('department_id')"
                                :items="$formData->departments"
                                item-value-field="id"
                                item-text-field="name"
                                placeholder="Seleccionar oficina"
                                template="templateSelectDepartments"
                                :data-tags="['parent_name']"
                                id="department_id"
                            />
                        </div>
                        <div class="form-group">
                            <x-forms.label>Destinado al usuario</x-forms.label>
                            <x-forms.selects.multiple
                                name="send_to[]"
                                :values="null"
                                :items="[]"
                                item-value-field="id"
                                item-text-field="name"
                                placeholder="Área completa"
                                id="send_to"
                            />
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-info">
                            Transferir
                            <i class="mi-swap-horiz ml-2"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endcan

@push('scripts')
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $("#department_id").change(function () {
                $.ajax({
                    type: "POST",
                    url: "{{ route('auth.users.get-from-department') }}",
                    data: {
                        id: this.value,
                    },
                    success: function (data) {
                        $("#send_to").empty().trigger("change");

                        if (data.length !== 0) {
                            data.forEach(element => {
                                const newOption = new Option(element.text, element.id);

                                $("#send_to").append(newOption).trigger("change");
                            });
                        }

                        $("#send_to").val(null).trigger("change");
                    },
                    dataType: "JSON"
                });
            });
        });
    </script>
@endpush